React/JSX - 以最少的代码重复有条件地更改元素类型

Question

假设我有这样的事情：

<div>
  {/* a lot of code */}
</div>

但如果某些条件为真，我希望它是：

<tr>
  {/* same code as before */}
</tr>

有没有办法在没有复制粘贴的大量代码重复的情况下实现这一目标？

Answer 1

您可以使用变量呈现内容React.Fragment并根据条件选择封闭元素。

例子

class App extends Component {
  state = { condition: true };

  render() {
    const { condition } = this.state;
    const content = (
      <Fragment>
        <h1>Hello world</h1>
        <h2>This is a lot of text...</h2>
      </Fragment>
    );

    return condition ? <div> {content} </div> : <tr> {content} </tr>;
  }
}

Answer 2

将其他人标记为已接受的答案，但我最终使用的解决方案是致电React.createElement(condition ? "div" : "tr", {attribute: stuff}, <div>Inner content</div>). 对于将来偶然发现这一点的人来说，这只是一个替代方案:)