text/babel 中的render加载jsx无法渲染

y使用createElement又是可以的

名字必须为Render

什么的名字?这个是vue里面使用的

export default {
  data() {
    return {
      title: "这是一个div",
      arr: ["张三", "李四"]
    };
  },
  methods: {
    click() {
      console.log(222);
    },
    input(e) {
      this.title = e.target.value;
    }
  },
  render() {
    return (
      <div>
        {this.arr.map((k, i) => {
          return (
            <div key={i}>
              {k}
              {i}
            </div>
          );
        })}
        {[<div>1</div>, <div>2</div>]}
        <input value={this.title} onInput={this.input} />
      </div>
    );
  }
};
new Vue({
  el: '#app',
  render(createElement) {
    // createElement 这个函数是用来渲染组件或者标签的
    // createElement('组件或者html标签',options={},插槽内容)
 
    //渲染组件
 
    return createElement(Test, {
      props: { // 给组件添加props
        num: 100,
        title:'标题',
      },
      on: { // 给组件监听事件
        click() {
          console.log(123)
        }
      },
      style: {//设置样式
        background:'red'
      },
      class: 'test'//添加类
    }, 'Test')
  
    //渲染标签
 
    //return createElement('button', {
    //  style:'background:red'
    //},'这是一个div')
  }
})

看一下实例,望采纳,谢谢

有什么报错吗?语法上没什么错误

Vue.component('element-block', {
    data(){
     return{
        aa:"44"
     }
    },
	 render(h){
         return (
                <div>
                 test{aa}
                </div>
              )
 
 }
});

 

你看一下我的这个提问和你的情况是否相同 https://ask.csdn.net/questions/7426316