Javascript 如何将React.DOM元素转换为JSX？

当涉及到反应JSX代码标准时： 我如何将下面的代码重构到JSX

const ListContainer = (props) => React.DOM.table({ className: 'list-container' }, [
    React.DOM.thead({ key: 'firstName' }, React.DOM.tr({}, [
        React.DOM.th({ key: 'lastName' }, null, 'headshot'),
        React.DOM.th({ key: 'id' }, null, 'First Name'),
        React.DOM.th({ key: 'last-h' }, null, 'Last Name')
    ])),
    React.DOM.tbody({ key: 'tbody' }, props.personList.map((person, i) =>
        React.createElement(ListRow, { key: `person-${i}`, person })))
]);

请参见以下网址的演示：

翻译如下：

const ListContainer = props => (
    <table className="list-container">
        <thead>
            <th>
                headshot
            </th>
            <th>
                First Name
            </th>
            <th>
                Last Name
            </th>
        </thead>
        <tbody>
            {
                props.personList.map((person, i) => {
                    return <ListRow key={`person-${i}`} person={person} />
                })
            }
        </tbody>
    </table>
);

const ListContainer=props=>(
头像
名字
姓
{
props.personList.map（（person，i）=>{
返回
})
}
);

当然，对于以上内容，您需要使用babel transpiler（如果您需要更多信息，请告诉我）

然后，您可以在JSX中使用常量，如下所示：

<ListContainer />

hi@sammysaglam我对两者的结合感到困惑，换句话说，正确的语法是：React.DOM.th（{key:'last-h'}，null，'last Name'）+React.DOM.tbody（{key:'tbody'}，props.personList.map（（person，I）=>React.createElement（ListRow，{key:

person-${I}，person}）），所以，我把你的代码翻译成JSX；但是，我不建议使用key属性，除了在component=>上，原因是React在创建元素列表时使用key作为特殊的字符串属性（例如，使用上面提到的“map”方法）。“键有助于识别哪些项已更改、已添加或已删除。应为数组中的元素提供键，以使元素具有稳定的标识”（）。当然，“key”属性没有什么坏处，但上面是多余的。@rimatla13我在（CodePen）添加了一个演示-[这很有意义@sammysaglam。非常感谢！