JSX语法与map函数

1、JSX语法可以看做JS+XML

2、如果参数是XML的标签或者是我们的一个方法返回的是XML标签，这种情况只允许有一个顶级标签

ReactDOM.render(
    <span>
        <h1>参数1</h1>
        <h1>参数2</h1>
    </span>,
    document.getElementById('root')
);

3、如果在XML中使用js代码，那必须用{}括起来

var name = "welcome To Barui";

ReactDOM.render(
    <h1>{name}</h1>,
    document.getElementById('root')
);

4、在js中使用XML无限制

var names = [
    <h1>参数1</h1>,
    <h1>参数2</h1>,
    <h1>参数3</h1>
];

5、map函数：遍历数组

var names = [
    "参数1",
    "参数2",
    "参数3",
    "参数4"
];

ReactDOM.render(
    <span>
        {
            names.map(function (name) {
                return (
                    <h1>{name}</h1>
                )
            })
        }
    </span>,
    document.getElementById('root')
);