Question

我正在将子代渲染为组件中的对象，并且我有一个结果数组，子代数等于结果数。我目前正在将所有结果传递给每个孩子，并且我正在尝试更改此结果，以便将不同的单个结果传递给每个孩子。例如，将child [0]传递给results [0]值，将child [1]传递给results [1]值，等等。

我目前正在使用以下代码块将所有结果传递给每个孩子：

    {React.Children.map(
      children,
      child => React.cloneElement(child, { results }),
    )}

我可以肯定我需要先遍历子级，然后遍历结果（反之亦然），但是我在使用正确的语法时遇到了麻烦。如果有人有任何建议，我将不胜感激，但是如果我在之前找到了建议，我一定会更新的。

Answer 1

使用地图的索引（i）：

{React.Children.map(
  children,
  (child, i) => React.cloneElement(child, { result: results[i] })
)}

示例：

const results = [1, 2, 3];

const Child = ({ result }) => <div>{ result }</div>

const Parent = ({ result, children }) => (
  <div>
  {React.Children.map(
    children,
    (child, i) => React.cloneElement(child, { result: results[i] })
  )}
  </div>
);

ReactDOM.render(
  <Parent results={results}>
    <Child />
    <Child />
    <Child />
  </Parent>,
  demo
);

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<div id="demo"></div>

针对特定儿童的特定阵列道具[反应]

1 个答案: