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 transpiler（如果您需要更多信息，请告诉我。）

然后你可以在JSX中使用你的const：

<ListContainer />

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

1 个答案: