有条件地渲染地图功能

Question

此代码没有任何条件可以正常工作：

return (

    <div id="home" className="container">

        <p>Current session: {session}</p>

        { Object.keys(cart).map( (thing, i) => 
        <p key={i}>{ JSON.stringify(cart[thing]) }</p>

        ) }

    </div>

)

如果我添加这种类型的条件，它可以工作（没有map函数）：

return (
    <div id="home" className="container">

       { session &&
           <p>Current session: {session}</p>
        } 

      </div>       
)

但是如果我尝试从第一个示例添加该map函数，它就不起作用：

  return ( 

    <div id="home" className="container"> 

       { session &&

        <p>Current session: {session}</p>

        { Object.keys(cart).map( (thing, i) => 
            <p key={i}>{ JSON.stringify(cart[thing]) }</p>

         )} 
       } 

   </div>

 )  

我怎么能添加只在条件下渲染的地图功能？我尝试了一个三元条件，似乎也存在类似的问题。我需要做出哪些调整？

Answer 1

您需要将返回的组件包装在div中。这将需要两个div，以处理session未定义的可能性。您尝试过的三元变体会产生同样的问题。

return (
  <div>
    { session && 

        <div>
        <p>Current session {session}</p>

        {
          Object.keys(cart).map( (thing,i) => {
            <p key={i}>{ JSON.stringify(cart[thing]) }</p>
          })
        }
        </div>

    }
  </div>
);

Answer 2

基本上第二个参数是条件需要包装在div或数组中，如果你使用React v16.1或更低版本

喜欢

return (
  <div>
    { session && 

        [
            <p>Current session {session}</p>,
             Object.keys(cart).map( (thing,i) => {
                <p key={i}>{ JSON.stringify(cart[thing]) }</p>
              })
         ]

    }
  </div>
);

Working CodeSandbox

否则，如果使用v16.2，您可以使用Fragment

return (
  <div>
    { session && 

        <React.Fragment>
        <p>Current session {session}</p>

        {
          Object.keys(cart).map( (thing,i) => {
            <p key={i}>{ JSON.stringify(cart[thing]) }</p>
          })
        }
        </React.Fragment>

    }
  </div>
);