我正在尝试借助从输入中获得的状态加载组件二或三。我知道如何在渲染函数中使用三元运算符。是这样的
render: function(){
return( <div>
{this.state.in===2?<Two/>: <Three/>}
</div>
)}
但这只适用于两个比较，如果我有十个组件并且想在 10 个不同的选择上加载 10 个不同的组件。我已经去了。这是我对此的尝试。我无法像使用三元运算符那样将 if 条件保留在 {} 中，如果我不将它们保留在 {} 中，渲染会将其作为普通文本加载。
这是我的代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React</title>
<script src="https://fb.me/react-0.13.3.js"></script>
<script src="https://fb.me/JSXTransformer-0.13.3.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/jsx">
var One = React.createClass({
getInitialState: function(){
return {in:2}
},
handler: function(eve){
this.setState({
in: eve.target.value
})
},
render: function(){
return(
<div>
<input value={this.state.in} onChange={this.handler} />
if(this.state.in ===2){
<Two/>
}
if(this.state.in ===3){
<Three />
}
</div>
)
}
});
var Two = React.createClass({
render: function(){
return(<div>
This is component 2
</div>)
}
});
var Three = React.createClass({
render: function(){
return(<div>This is the third one</div>)
}
})
React.render(<One/>,document.getElementById('example'));
</script>
</body>
</html>
ps: 如需进一步阅读和官方文档，请查看此 http://facebook.github.io/react/tips/if-else-in-JSX.html
最佳答案
React 可以处理节点数组。因此，尝试创建一个数组:
let children = [];
if (cond1) children.push(elem1);
if (cond2) children.push(elem2);
if (cond3) children.push(elem3);
return <div>{children}</div>;
关于javascript - 如何在渲染函数中使用 if 进行比较，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31536332/