在 Vue 中使用 JSX，很 easy 的

createElement( 'anchored-heading', { props: {  level: 1 } }, [ createElement('span', 'Hello'), ' world!' ])

<anchored-heading :level="1"> <span>Hello</span> world!</anchored-heading>

vue create vue-jsx# 选择vue2的

npm install @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props# oryarn add @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props

module.exports = { presets: [ '@vue/cli-plugin-babel/preset', ['@vue/babel-preset-jsx',  {  'injectH': false  }] ]}

yarn serve

export default {  name: 'HelloWorld',  props: {    msg: String  }}

import myComponent from './myComponent'import './HelloWorld.css'
// 创建一个组件buttonconst ButtonCounter = {  name: "button-counter",  props: ["count"],  methods: {    onClick() {      this.$emit("change", this.count + 1);    }  },  render() {    return (      <button onClick={this.onClick}>数量 {this.count}+</button>    );  }};export default {  name: 'HelloWorld',  components: {    myComponent   },  data () {    return {      text:'hello 纸没了飞机',      inputText:'我吃了',      count: 0    }  },  props: {    msg: String  },  watch: {},  methods: {    onChange(val) {      this.count = val;      alert(this.count)    }  },  render() {  // const {text,inputText,count} = this //通过解构，下方return片段中就不需要this    return (    <div>     <h3>内容</h3>     {/* 纯文本 */}     <p>hello, I am Gopal</p>     {/* 动态内容 */}     <p>{ this.text }</p>     <p>hello { this.msg }</p>     {/* 输入框 */}     <input/>     {/* 自定义组件 */}     <myComponent/>     <ButtonCounter        style={{ marginTop: "10px" }}        count={this.count}        type="button"        onChange={this.onChange}      />    </div>    );   }}

<h3 class="colorRed">内容</h3>

<style>.colorRed{  color: red;}</style>

yarn add global stylusyarn add --dev stylus stylus-loader

<p style="color:blue">hello, I am Gopal</p>

<p style={this.isGreen?'color:green':''}>{ this.text }</p><p class={this.isYellow?'colorYellow':''}>hello { this.msg }</p><p style={this.isRed?colorRed:''}>红色的文字</p>

<input placeholder="我是placeholder"  /><input placeholder={placeholderText}  />{/* 解构N个属性，要啥放啥 */}<div {...attrObj}  />

render() {    const { htmlCode } = this    return (        <div>            <div domPropsInnerHTML={htmlCode}></div>        </div>    );   }

render() {    let bool = false    return (        <div>            { bool ? <button>按钮1</button> : <button>按钮2</button>}        </div>    );   }

render() {  let num = 3  if(num === 1){ return( <button>按钮1</button> ) }  if(num === 2){ return( <button>按钮2</button> ) }  if(num === 3){ return( <button>按钮3</button> ) }}

render(h) {  var list = [1,2,3]  return(     <div>      { list.map(item => <button>按钮{item}</button>) }    </div>  )}

methods: {    handleClick(val){        alert(val)    }  },<button type="button" onClick={this.handleClick.bind(this, 11)}>点击bind</button><button type="button" onClick={() => this.handleClick(11)}>点击箭头函数</button>

<input type="text" value={this.text} onInput={this.input}/>methods: {    input(e){        this.text = e.target.value    }  }

render() {  return (    <input      value={this.content}      on={{        focus: this.$_handleFocus,        input: this.$_handleInput      }}      nativeOn={{        click: this.$_handleClick      }}    ></input>  )}

if (event.target !== event.currentTarget){  return}

if(event.keyCode === 13) {  // 执行逻辑}

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>    )  }

clickOnce(val) {  alert(val);},<button    type="button"    on={{       '~click': ()=>this.clickOnce('只能点一次'),    }}   >    事件修饰符点击一次</button>

methods: {    $_renderFooter() {      return (        <div>          <el-button>确定</el-button>          <el-button onClick={ () =>this.closeDialog() }>取消</el-button>        </div>      );    },    openDialog(){        this.visible = true    },    closeDialog(){        this.visible = false      }  },render() {    const buttons = this.$_renderFooter();    return (      <div>        <Button onClick={ () =>this.openDialog() }>打开Dialog</Button>        <el-dialog visible={this.visible}>          <div>弹窗内容</div>          <template slot="footer">{buttons}</template>        </el-dialog>      </div>    );  }

render() {    return (      <ElDialog title="弹框标题" visible={true}>        {/*这里就是默认插槽*/}        <div>这里是弹框内容</div>      </ElDialog>    )  }

export default {  props: {    visible: {      type: Boolean,      default: false    }  },  render() {    return (      <div class="custom-dialog" vShow={this.visible}>        {/**通过this.$slots.default定义默认插槽*/}        {this.$slots.default}      </div>    )  }}

<myComponent visible={true} slot>我是自定义默认插槽</myComponent>

render() {    return (      <ElDialog title="弹框标题" visible={true}>        <div>这里是弹框内容</div>        {/** 具名插槽 */}        <template slot="footer">          <ElButton>确定</ElButton>          <ElButton>取消</ElButton>        </template>      </ElDialog>    )  }

render() {    return (      <div class="custom-dialog" vShow={this.visible}>        {this.$slots.default}        {/**自定义具名插槽*/}        <div class="custom-dialog__foolter">{this.$slots.footer}</div>      </div>    )  }

<myComponent visible={true}>      <template slot="footer">            <ElButton>确定</ElButton>            <ElButton>取消</ElButton>      </template></myComponent>

<myComponent1      visible={this.visible}      {...{         scopedSlots: {           test: ({ user }) => {           // 这个user就是子组件传递来的数据，同理可这样拿到el-table的row，不过test得是default，不过案例还是我这样              <div style="color:blue;">快来啊，{user.name}，看看这个作用域插槽</div>          },         },     }}></myComponent1>

// 一个为jsx的子组件(玩玩插槽)
export default {    name: "myComponent",    data() {      return {      };    },    props: {      visible: {        type: Boolean,        default: false,      },      listData: {        type: Array,        default: function() {          return [];        },      },    },    render() {      return (        <div vShow={this.visible}>          {/**自定义作用域插槽*/}          <div class="item">           {this.$scopedSlots.test({                user: {name:'纸飞机'}            })}          </div>        </div>      );    },  };  

// export default ({ props }) => <p>hello {props.message}</p>;
// 或者推荐下方写法
export default {  functional: true,  name: "item",  render(h, context) {      console.log(context.props)    return <div style="color:red;font-size:18px;font-weight:bold">{context.props.message}</div>;  },};

<funComponent message="展示下函数式组件"></funComponent>