假设我有一些东西:
<div>
{/* a lot of code */}
</div>
但是如果某些条件为真,我希望它为:
<tr>
{/* same code as before */}
</tr>
在复制粘贴中没有大量代码重复的情况下,有没有办法实现这一目标?
答案 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>)
。对于以后偶然发现此问题的任何人来说,这只是一个选择:)