Question

假设我要访问第三个孩子的Component。

<Component>
  <div>1</div>
  <div>2</div>
  <div>3</div>
</Component>

实际上，我发现了三种实现方法：

1）使用React.children.map

const Component = ({children}) => 
  <>{React.Children.map(children, (child, i) => i === 2 && child)}</>

工作正常，但很冗长，且在 O（n）中。

2）使用React.Children.toArray

const Component = ({children}) =>
  <>{React.Children.toArray(children)[2]}</>

不太冗长，但我不知道复杂性。是 O（1）吗？如果是这样，它是否足够性能？

3）直截了当使用孩子作为数组

const Component = ({children}) => <>{children[2]}</>

乍一看似乎很理想，但如果将子代作为数组传递，则无法正常工作。例如，如果我写了这样的东西：

<Component>
  <div>1</div>      
  {[2, 3].map(i => <div key={i}>{i}</div>)}
</Component>

Component将假定只有2个孩子，其2nd是2个孩子的数组。因此children[2]将不存在。

所以我的问题是：让孩子进入索引的最佳方法是什么？方法toArray比map更有效吗？还是有办法解决 3）选项的问题？

Answer 1

使用toArray中的map或React.Children方法之间没有太大区别。以下是React代码库中的各个代码段

function toArray(children) {
  const result = [];
  mapIntoWithKeyPrefixInternal(children, result, null, child => child);
  return result;
}

function mapChildren(children, func, context) {
  if (children == null) {
    return children;
  }
  const result = [];
  mapIntoWithKeyPrefixInternal(children, result, null, func, context);
  return result;
}

如您所见，如果您将子代传递为null或不传递任何子代，React.Children.map将分别返回null或undefined。但是，在任何情况下，toArray总是会返回一个数组，因此您可以安全地使用<>{React.Children.toArray(children)[3]}</>

也当您使用

<>{React.Children.map(children, (child, i) => i === 2 && child)}</>

它返回您[false, false, Object]，这不是您的意图。但是，您可以写

<>{React.Children.map(children, (child, i) => i === 2 ? child: null)}</>

在React中让孩子成为索引的最有效方法是什么

1 个答案: