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

时间:2018-06-30 05:09:58

标签: javascript reactjs

假设我有一些东西:

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

但是如果某些条件为真,我希望它为:

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

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

3 个答案:

答案 0 :(得分:3)

您可以使用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>;
  }
}

答案 1 :(得分:1)

在函数内添加代码

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

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

condition? returnView() : ' '

答案 2 :(得分:0)

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