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

在函数内添加代码

function returnView() {
  render (
  // a lot of code
);
}

如果条件为真，则调用该函数

condition? returnView() : ' '

Answer 3

将其他人标记为可接受的答案，但是我最终使用的解决方案是致电React.createElement(condition ? "div" : "tr", {attribute: stuff}, <div>Inner content</div>)。对于以后偶然发现此问题的任何人来说，这只是一个选择：）

React / JSX-有条件地更改元素类型，减少代码重复

3 个答案: