在 React JSX 中生成 HTML 表格

Question

我正在从 JSX 中生成一个 HTML 表。美丽的。除了必须有条件地生成表的某些部分。所以，我使用三元表达式，并生成<td>'s。

但是 JSX 只允许一次生成一个元素，所以，我最终将<span> 放在了条件部分周围。

但 React、Chrome 或 HTML 不允许在 <tbody>s 中使用 span。啊!这就是 Chrome 向我扔的东西： Warning: validateDOMNesting(...): <span> cannot appear as a child of <tbody>.

那么男人该怎么办？

这里有一些代码。也许有一个更更简单的方法来做到这一点？

{card.vars.map(section => {
    return (
        <tbody className="bodySection">
            <td rowSpan={section.vars.length} className="side-title">{section.varTypes}</td>
            {section.vars.map((item, index) => {
                return (
                    <span key={index}>
                        <td className="fieldname src-data">{item.varName}</td>
                        <td className="fieldvalue src-data">{item.varVal ? 'Yes' : 'No'}</td>
                        {!('transform' in item) ? (
                            <span>
                                <td className="fieldname dest-data">{item.varName}</td>
                                <td className="fieldvalue dest-data">
                                    <input type="text" onChange={this.onValChange.bind(this)} value={item.varVal} />
                                </td>
                            </span>
                        ) : ''}
                    </span>
                );
            })}
        </tbody>
    );
})}

Answer 1

如果您使用的是 React 16，则可以返回一个元素数组，每个元素都有一个 key 属性。

const App = () => [
  <p key="1">React 16 can return multiple elements ❤️</p>,
  <p key="2">React 16 can return multiple elements ❤️</p>,
  <p key="3">React 16 can return multiple elements ❤️</p>,
];

或者如果你使用的是 React 16.2，你可以使用新的 Fragment 语法

const App = () => (
  <React.Fragment>
    <p>React 16 can return multiple elements ❤️</p>
    <p>React 16 can return multiple elements ❤️</p>
    <p>React 16 can return multiple elements ❤️</p>
  </React.Fragment>
);

注意。来自this article about returning multiple elements的示例