条件渲染地图函数答案

【问题标题】：Conditionally rendered map function条件渲染地图函数
【发布时间】：2018-01-04 18:42:31
【问题描述】：

这段代码没有任何条件都可以正常工作：

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>

)

如果我添加这种类型的条件，它会起作用（没有地图功能）：

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

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

      </div>       
)

但是如果我尝试从第一个示例中添加该地图功能，它就不起作用：

  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>

 )

如何添加仅在某个条件下呈现的地图功能？我尝试了三元条件，似乎也存在类似的问题。我需要做哪些调整？

【问题讨论】：

当您说“它不起作用”时，您具体是什么意思？什么不起作用？这仅仅是没有根节点的问题吗？在您的第一个示例中，您有一个外部 div 来包含整个返回值...
首先，您的第二个 sn-p 将被解释为由于 ({ … }) 而返回的对象。其次，假设您在 React 16+ 中，您需要将多个孩子包装在一个数组中。
How do i load my React component conditionally?的可能重复

标签： javascript reactjs jsx

【解决方案1】：

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

喜欢

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

【讨论】：

我使用 React 15.6.2，我使用数组尝试了您的想法，但出现错误“意外令牌”指示 Object.keys 处的点。您可以在这里看到：codesandbox.io/s/k1o6lyyy7o（查看 Home 组件）
那是因为在数组内部，你不需要用{}包装语句

【解决方案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>
);

【讨论】：

我忘记将外部 div 添加到我的两个示例中。但是您添加的其他 div 解决了问题！我不知道这是必需的。