1

是否有任何文档部分阐明了为什么我应该使用驼峰式大小写作为点击处理程序，但使用烤肉串作为输入（以及其他所有内容）？但不适用于点击，只有点击才onClick有效。

实际上，我注意到对于公共输入，两个选项都可以正常工作，on-input或者onInput.

const MyJSXInput = {
  props: {
    value: {
      type: Boolean,
      required: true
    },
    clickHandler: {
      type: Function,
      required: true
    },
    inputHandler: {
      type: Function,
      required: true
    },
  },
  // eslint-disable-next-line no-unused-vars
  render(createElement) {
    const { value, clickHandler, inputHandler } = this.$props
    return (
      <input onClick={clickHandler} on-input={inputHandler} type="checkbox" value={value} />
    )
  }
}

不知道是否重要，但我将此组件用作另一个组件的渲染功能道具。像这样（全部简化）：

    renderProp: () => (
      <MyJSXInput 
        value={someValue}
        click-handler={this.someHandlerClick}
        input-handler={this.someHandlerInput}
      />
    )

最后一个组件有这样的东西：

  render(h) {
    return (
      <div>
        {this.$props.renderProp(this)}
      </div>
    )
  }
4

2 回答 2

1

在 React jsx 中，元素事件绑定使用驼峰式大小写：onClick或onMouseDown.

但是在html Specification中，事件绑定是完整的小写：onclick或onmousedown.

所以 React babel 插件将驼峰大小写转换为小写。

在 Vue 中，vue jsx 插件将 jsx 转换为 vue 渲染功能，注意小写。

在此处输入图像描述

于 2020-01-20T07:00:16.620 回答
0

在这里找到一条信息：

https://github.com/vuejs/babel-plugin-transform-vue-jsx#difference-from-react-jsx

但是我仍然不知道为什么 kebab case 适用于输入事件。

于 2018-11-21T14:21:21.350 回答