时间戳

首页 > 解决方案 > 反应渲染特定的孩子

reactjs - 反应渲染特定的孩子

问题描述

我已经查看了其他人与此相关的问题，但找不到合适的答案。我想将孩子传递给一个组件，然后在我想要的地方拉出特定的孩子，我见过的大多数例子只是让孩子在同一个地方渲染。

我的组件看起来像这样 -

<ParentComponent>

<ChildOne/>
<ChildTwo/>

<ParentComponent/>

当我在父组件中记录 props.children 时，我得到一个包含两个子对象作为对象的数组。有没有一种简单的方法可以在我需要它的地方取出特定的孩子，比如{props.children.ChildOne}我现在正在使用props.children[0]这并不理想，因为我们将来会动态地传递孩子，并且数组长度可能会改变。

一如既往，非常感谢任何帮助！

标签： reactjschildren

解决方案

根据您的具体情况和需求，将子组件作为道具传递可能比使用特殊children道具更有意义。然后你可以用任何你喜欢的方式渲染它们。

<ParentComponent childOne={ChildOne} childTwo={ChildTwo} />
...
const ParentComponent = ({ childOne, childTwo }) => {
  return (
    <div>
      {childOne}
      <div>
        {childTwo}
      </div>
    </div>
  );
};

但是了解您的确切情况将有助于概念化实现这一点的最佳方式。也许您可以重构您的代码以避免传递这样的子数组。

推荐阅读