有条件渲染的地图功能

加利文

这段代码没有任何条件就可以了:

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>

 )  

如何添加仅在条件中呈现的地图函数?我尝试了三元条件,似乎也有类似的问题。我需要进行哪些调整?

杰森·沃塔(Jason Warta)

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章