条件渲染无法按预期在reactjs中工作

Question

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

请尝试条件渲染

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 个解决方案

解决方案1
1 已采纳 2017-07-25 13:58:32

解决方案2
0 2017-07-25 13:05:18

解决方案3
0 2017-07-25 13:19:18

条件渲染无法按预期在reactjs中工作

问题描述

3 个解决方案

解决方案1 1 已采纳 2017-07-25 13:58:32

解决方案2 0 2017-07-25 13:05:18

解决方案3 0 2017-07-25 13:19:18

解决方案1
1 已采纳 2017-07-25 13:58:32

解决方案2
0 2017-07-25 13:05:18

解决方案3
0 2017-07-25 13:19:18