使用对象映射和额外组件反应条件渲染答案

【问题标题】：React Conditional Render with object mapping and extra components使用对象映射和额外组件反应条件渲染
【发布时间】：2021-09-13 06:14:57
【问题描述】：

我想同时映射对象和组件来进行条件渲染

例如

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

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

)

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

【问题讨论】：

你分享的代码不是在条件渲染的单个返回上面吗？您可以在SomeObject 之后移动要条件渲染的组件，避免重写相同的组件
@van 我做了错误的例子。这将是不同的组件

标签： reactjs conditional-rendering

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

【讨论】：