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中或如果你使用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>
);

Answer 2

您需要将返回的组件包装在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>
);

有条件地渲染地图功能

2 个答案: