vue jsx 循环创建组件为什么不显示？

Question

components: {

        CqFrameSide,
        "CqGroup":{
            methods:{
                hello(){
                    console.log("dd");
                    return "xxxxxx"
                }
            },
            props: {
                a:'xx'
            },
            data () {
                return {
                    todos:[1,2,3],
                    formId:'framecore',
                }
            },
            render (h) {
                var lis = this.todos.forEach(todo =>{ 
                    return  (
                            <div id="foo"> {todo} </div>
                    ); 
                 });
                var x = this.formId;
                return  (

                        <div id="foo"> {x} </div>

                );

            }
        }

循环todos创建div 没有用，不是显示在界面上是什么原因？

Answer 1

刚开始学校小白，自己找到原因了，应该写作这样
render (h) {

return  <div domPropsInnerHTML="titles" style={{ color: 'red', fontSize: '14px' }}>
  {
    this.todos.map(item =>{
      return <div>{item}</div>
    })
  }
</div>

}
和普通的组件一样 都需要一个根节点，jsx {}内的东西是js,这样就能正确渲染了

Answer 2

forEach:遍历不返回 换成`map`: 返回xxx...