如何将 React.DOM 元素转换为 JSX?
How to convert React.DOM elements to JSX?
谈到 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 })))
]);
观看演示: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 中使用您的常量:
<ListContainer />
谈到 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 })))
]);
观看演示: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 中使用您的常量:
<ListContainer />