Question

正如标题所述：下面的伪代码被认为是坏的吗？

<Outer
    a = { ComponentA }
    b = { ComponentB }
/>

var Outer = (props) => {
    var ComponentA = props.a;
    var ComponentB = props.b;

    // do fancy stuff
    // ...

    return (
        <div>
            <ComponentA { ...fancypropsForA } />
            <ComponentB { ...fancypropsForB } />
        </div>
    );
}

作为一个例子：我通过传递一个将呈现单个节点数据的组件，以不同的方式显示树数据。

修改

根据要求，我会尽力使我的问题更加明确。每次使用此组件时，都有一个组件具有一些逻辑和一些标记。但是该标记中有两个（或更多）位置应该可以替换。

画出显示整月的日历。有一个组件可以呈现一个单独的日期，另一个组件可以呈现工作日（在顶部的栏中）。您希望在多个位置重复使用该日历，但每次都需要不同的日期/工作日组件标记。

实现这一目标的一种方法是：

<Calendar
    data={ data }
    weekdayComponent={ MyWeekDayComponent }
    dateComponent={ MyDateComponent }
/>

<Calendar
    data={ data }
    weekdayComponent={ SomeOtherWeekDayComponent }
    dateComponent={ SomeOtherDateComponent }
/>

所以，我发现这很有效。但我不确定这是不是真的很糟糕。

Answer 1

只要数据只在一个方向上流动，你就可以了。你的例子有点人为，所以很难看出你想要解决的一般问题，但我认为你真正想要的是高阶组件。

https://medium.com/@franleplant/react-higher-order-components-in-depth-cf9032ee6c3e

传递组件作为道具被认为是不好的做法？

1 个答案: