function Demo(props){
return(
<div>
{props.boolean && <div>}
<h1>
HI,many of these kind of dom elements will be here
</h1>
{props.boolean && </div>}
</div>
)
}
ReactDOM.render(
<Demo boolean="true"/>, document.body
);<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<!DOCTYPE html>
</head>
<body>
</body>
</html>如果 prop bool 值为真，我想获取表单标签，但它没有按预期工作。 如果我使用这样的代码
{props.boolean && <div></div>}
<h1>
HI,many of these kind of dom elements will be here
</h1>
{props.boolean && <div></div>}
它来了，所以如果开始和结束标签在一起那么它的工作。当标签分开时有什么方法可以获取值...请帮助
最佳答案
你正在尝试做某事，这有点反模式。这可能是更好的解决方案:
function Demo(props) {
function MyContents() {
return (
<h1>
HI,many of these kind of dom elements will be here
</h1>
);
}
return (
<div>
{ props.boolean ?
<div><MyContents /></div>
:
<MyContents />
};
</div>
);
}
ReactDOM.render(
<Demo boolean="true" />, document.body
);
关于javascript - 条件渲染在 reactjs 中没有按预期工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45303908/