反应渲染特定的子对象

Question

我看过其他人提出的与此相关的问题，但找不到合适的答案。我希望将子对象传递给组件，然后在需要它们的地方拉出特定的子对象，我看到的大多数示例都是在相同的位置渲染子对象。

我的组件看起来像这样-

<ParentComponent>

<ChildOne/>
<ChildTwo/>

<ParentComponent/>

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

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

Answer 1

一种方法是通过包含ParentComponent及其子组件的组件中的state/props/redux存储管理来控制传递给ParentComponent的子组件。

但是为了根据您的用例获得解决方案，我们可以避免使用childrenprop，并在ParentComponent上使用我们定义的prop。

<ParentComponent
    components={[
     {key: 1, component: <div>Hello</div>}
    ]}
/>

所以，我们现在可以从密钥过滤。

看看这个演示

Answer 2

实际上，我刚才提到的API在这里是无用的。

您可以这样做：

import React from 'react';
import { ChildOne } from './YourFile';

export function ParentComponent({children}) {
  return children.find(child => child.type === ChildOne)
}

Answer 3

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

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

但是了解您的具体场景将有助于概念化实现这一点的最佳方式。也许您可以重构代码，以避免像这样传递子数组。