Question

＆＃13;

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
);

＆＃13;

<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>

＆＃13;

如果prop boolean值为true，我想获取form标签，但是它没有按预期工作。如果我使用这样的代码

   {props.boolean && <div></div>}  
    <h1>
        HI,many of these kind of dom elements will be here
     </h1>
    {props.boolean && <div></div>}

它来了，所以如果打开和关闭标签在一起然后它的工作。有任何方法来获取标签分开时的值...请帮助

Answer 1

你正在尝试做某事，这有点像反模式。这可能是一个更好的解决方案：

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
);

Answer 2

请尝试Conditional Rendering

function Demo(props) {
    const flag = props.flag;
    return (
        if (flag) {
            return <h1 > true < /h1>;
        }

        return <h1 > false < /h1>;

    )
}

 ReactDOM.render(
  <Demo flag={true}/>,  document.getElementById('root')
);

HTML

<body>
  <div id="root"></div>
</body>

Answer 3

进行条件渲染的另一种更好的方法

function Demo(props) {
    return (
      <h1>{props.flag ? true : false}</h1>;
    )
}

 ReactDOM.render(
  <Demo flag={true}/>,  document.getElementById('root')
);

有条件的渲染在reactjs中没有按预期工作

3 个答案: