Question

如果我们需要传递一份儿童名单，很明显该怎么做：

export const SomeWrapper = ({ children }) => (
    <div className="list-of-something">
        {children}
    </div>
);

<SomeWrapper>
    <C1 />
    <C2 />
</SomeWrapper>

但是，通过几个有不同父母的孩子的最佳方法是什么？

export const SomeWrapper = ({ component1, component2 }) => (
    <div className="list-item">
        <div className="name">
            {component1}
        </div>
        <div className="whatever">
            {'Whatever'}
        </div>
        <div className="value">
            {component2}
        </div>
    </div>
);

<SomeWrapper component1={<C1 />} component2={<C2 />} />

我不确定这是最好的解决方案。做this.props.children [0]和this.props.children [1]看起来也很奇怪。

在这种情况下你会建议什么？

Answer 1

ReactJS的最佳实践是将单个组件作为子项传递

<Parent>
    <Child/>
</Parent>

或同类数组的数组

<Parent>
    [<Child key='c1'/>, <Child key='c2' />]
</Parent>

在您的情况下，建议不要将容器/组件作为属性放在父组件中。只需传递一些主要值（最多是一个浅平面对象）作为父项中的属性，并在该特定父对象中构造子组件：

//SomeWrapper
const SomeWrapper = ({c1, c2}) => (
<Parent>
  <ChildItemA title={c1.title} ... />
  <ChildItemB title='Whatever' ... />
  <ChildItemC title={c2.title} ... />
</Parent> );

//Usage
<SomeWrapper c1={c1_obj} c2={c2_obj} />

传递多个孩子的最佳方式是什么？

1 个答案: