反应条件渲染与对象映射和额外的组件

Question

我想通过映射对象和组件一起进行条件渲染

例如

return(
    fixed? 
      Object.values(data).map((content, index)=>(
       <SomeObject1/> 
      )
      // mapping and extra components
       <ExtraThing1/>
       <ExtraThing2/>
      :

        Object.values(data).map((content, index)=>(
       <SomeObject2/> 
      )
       <ExtraThing3/>
       <ExtraThing4/>

)

有没有办法一次性做到这一点return？

Answer 1

我认为@Yoshi 的回答在技术上是正确的，但与 OP 的代码不太匹配。 React Fragment (<></>) 分组在三元运算符的每个分支上，每个组由映射组件和一些额外组件组成。对于每个返回值，应该返回一个 React 节点。

return fixed ? (
  <>
    {Object.values(data).map((content, index) => (
      <SomeObject1 />
    ))}
    // mapping and extra components
    <ExtraThing1 />
    <ExtraThing2 />
  </>
) : (
  <>
    {Object.values(data).map((content, index) => (
      <SomeObject2 />
    ))}
    <ExtraThing3 />
    <ExtraThing4 />
  </>
);

反应条件渲染与对象映射和额外的组件

React Conditional Render with object mapping and extra components

reactjs

conditional-rendering