React中ReactDOM.render参数语法错误

Question

新学JSX,React 不太懂。。求指教

let names = ['Python', 'Java', 'C++', 'Javascript', 'C'];      
        ReactDOM.render(
            <div>
                {   //为什么这里报错 " }expected" 呢
                    
                    for(let name of names){
                        +function (){
                             return <h1>{name}</h1>;
                          }();
                    }
                   
                }
            </div>,
            document.getElementById('example')
        );

Answer 1

{ } 是 jsx 中的模版插值语法。里面不管是写变量、表达式还是函数，都要确保有返回值。

for有返回值吗？

一般是用 map 遍历数据：

<div>
    {arr.map(item => {
        return <h1>{item}</h1>
    })}
</div>

Answer 2

你得for...of语句没有返回值，按你的思路，可以将for...of放入立即执行函数并返回回去，如示例。

<div>
    {
        (function () {
            var arr = []
            for(let name of names){
                 arr.push(<h1>{name}</h1>)
            }
            return arr
        })()
    }
</div>

但React中一般遍历对象使用对象的keys()接口，配合使用数组中的map()或reduce()等具有返回值的接口。

Object.keys(obj).map( key => obj[key] )