Question

我在JSX中生成HTML表格。美丽。除了表格的某些部分必须有条件地生成。所以，我使用三元表达式，并生成<td>＆＃39; s。

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

但是，React，Chrome或HTML不允许<tbody>中的跨度。啊!这就是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>
);

NB。 this article about returning multiple elements

中的示例

在React JSX中生成HTML表

1 个答案: