jsx中的 v-html 、 v-text

v-html: 在模板代码中，我们用v-html指令来更新元素的innerHTML内容，而在JSX里面，如果要操纵组件的innerHTML,就需要用到domProps

 export default {
  data() {
  return {
  content: '<div>你好</div>'
     }
   },
  render() {
  // v-html 指令在JSX的写法是 domPropsInnerHTML
  return <div domPropsInnerHTML={this.content}></div>
   }
 }

v-text: v-text在JSX的写法domPropsInnerText

 export default {
  data() {
  return {
  content: '你好'
     }
   },
  render() {
  return <div domPropsInnerText={this.content}></div>
   }
 }

但实际上我们不需要使用domPropsInnerText,而是将文本作为元素的子节点去使用即可

<div>{this.content}</div>

监听事件与原生事件

通过v-on:change的方式去监听事件，在JSX中无法使用v-on指令

render() {
     return <CustomSelect onChange={this.$_handleChange}></CustomSelect>
   }
 ​
// JSX`中，通过`on` + 事件名称的大驼峰写法来监听，比如事件`icon-click`,在`JSX`中写为`onIconClick

监听一个组件根元素上面的原生事件，这时候会用到.native修饰符

  render() {
     // 监听下拉框根元素的click事件
     return <CustomSelect nativeOnClick={this.$_handleClick}></CustomSelect>
   }

监听原生事件的规则与普通事件是一样的，只需要将前面的on替换为nativeOn

  //除了上面的监听事件的方式之外，我们还可以使用对象的方式去监听事件
   render() {
     return (
       <ElInput
         value={this.content}
         on={{
           focus: this.$_handleFocus,
           input: this.$_handleInput
         }}
         nativeOn={{
           click: this.$_handleClick
         }}
       ></ElInput>
     )
   }

事件修饰符
和指令一样，除了个别的之外，大部分的事件修饰符都无法在JSX中使用，这时候你肯定已经习惯了，肯定有替代方案的。

.stop ： 阻止事件冒泡，在JSX中使用event.stopPropagation()来代替
.prevent：阻止默认行为，在JSX中使用event.preventDefault() 来代替
.self：只当事件是从侦听器绑定的元素本身触发时才触发回调，使用下面的条件判断进行代替

if (event.target !== event.currentTarget){
return
}
.enter与keyCode: 在特定键触发时才触发回调
if(event.keyCode === 13) {
// 执行逻辑
}

除了上面这些修饰符之外，对于.once,.capture,.passive,.capture.once，尤大大提供了前缀语法帮助我们简化代码

  render() {
     return (
       <div
         on={{
           // 相当于 :click.capture
           '!click': this.$_handleClick,
           // 相当于 :input.once
           '~input': this.$_handleInput,
           // 相当于 :mousedown.passive
           '&mousedown': this.$_handleMouseDown,
           // 相当于 :mouseup.capture.once
           '~!mouseup': this.$_handleMouseUp
         }}
       ></div>
     )
   }