在 React 中渲染之前返回完成的地图答案

【问题标题】：Return completed map before rendering it in React在 React 中渲染之前返回完成的地图
【发布时间】：2023-01-30 18:37:39
【问题描述】：

我有一个处理列表的组件，并且有一些内部逻辑来确定它应该呈现为 ul 还是 div。如果列表为空，则呈现为 div，如果列表有元素，则呈现为 ul。

我正在进行 API 调用以获取潜在的元素列表。当我循环时，

<ParentUlOrDiv>
  {data.map(el => {
    <div>test</div>
  })}
  <div>final row</div>
</ParentUlOrDiv>

父级不知道它必须呈现的元素数量，因此它将它们全部插入一个li，这意味着我会得到各种视觉错误行为。

我怎样才能从 data 返回完整的映射列表并将其作为子项传递给 ParentUlOrDiv（因为它知道需要呈现的元素数量）？

如果我只是硬编码两个 divs 而不是地图，我就会正确渲染。但是有了地图，我就遇到了问题。

【问题讨论】：

您可以从更深的部分数出孩子的数量，对吗？不确定你问什么
如何仅在地图中完成数组时才渲染！
您目前在map()回调中没有返回值。将 el => { <div>test</div> } 更改为 el => (<div>test</test>) 以获得隐式返回（注意大括号更改），或在 <div>test</div> 之前添加显式 return。见：Arrow function expressions: Function body - MDN

标签： javascript reactjs

【解决方案1】：

使用 props.children.length 在 ul 或 div 之间进行选择。

例如，如果孩子数量超过 1，则孩子被包裹在 ul 和 li 中。否则，它只是呈现在 div 中

const ParentUlOrDiv = (props) => {
  console.log('ParentUlOrDiv got', props.children.length, 'children');
  
  const WrapElement = props.children.length > 1 ? 'ul' : 'div';
  
  const values = props.children.length > 1 ? props.children.map(c => <li>{c}</li>) : props.children;
  
  return <WrapElement>{values}</WrapElement>;
}

const Example = () => {
    
    const data = [
      'Foo', 'Bar'
    ]

    return (
        <ParentUlOrDiv>
            {data.map(d => <em>{d}</em>)}
        </ParentUlOrDiv>
    )
}
ReactDOM.render(<Example />, document.getElementById("react"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="react"></div>

【讨论】：

div / ul 之间的决定发生在来自组件库的父组件中，所以对我来说，我只需要从 map 返回一个完整的列表，并将其作为子组件传递给这个组件
呵呵，您已经在问题的代码中这样做了。不确定需要更改什么。
我不是因为在从 data.map 返回数组之前呈现 ParentUlOrDiv
只需添加两个 div 而不是地图即可正确渲染它，所以问题是地图发生在渲染之后

【解决方案2】：

答案最终是因为父级中混合了动态/静态内容。它必须都是动态的，来自地图。

【讨论】：