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

Question

说到 React 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 })))
]);

Answer 1

查看演示：CodePen

翻译如下：

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>
);

当然，对于上述内容，您需要使用 babel 转译器（如果您需要更多信息，请告诉我）。

然后您可以在 JSX 中按如下方式使用您的 const：

<ListContainer />