javascript - 如何将相同的 Prop 传递给组件中的每个子组件

Question

我有一个正在渲染条件不同组件的组件。我不能在每个地方传递相同的 Prop ，因为这会破坏漂亮的代码。我该如何优化它？

render(){
  const {what, y} = this.props.ddd

  return(){
    {what === "XXX" && <> <SmthComp1 x=y /> <SmthComp2 x=y /> }
    {what === "ZZZ" && <> <SmthComp3 x=y /> <SmthComp34 x=y /> }
    {what === "YYY" && <> <SmthComp5 x=y /> <SmthComp12 x=y /> }
    {what === "BBB" && <> <SmthComp6 x=y /> <SmthComp23 x=y /> }
    {what === "GGG" && <> <SmthComp7 x=y /> <SmthComp21 x=y /> }

  }
}

事实上，还有更多的 props(不仅仅是 x)会破坏代码。但它们总是一样的。

每个组件都有属性 x 和值 y。我不想将其传递给每个组件。

Answer 1

您可以使用组件映射并将 Prop 存储在变量中，如下所示:

render() {
    const {what, y} = this.props.ddd

    const componentsMap = {
        "XXX" : [SmthComp1, SmthComp2],
        "ZZZ" : [SmthComp3, SmthComp34],
        "YYY" : [SmthComp5, SmthComp12],
        "BBB" : [SmthComp6, SmthComp23],
        "GGG" : [SmthComp7, SmthComp21],
    };

    const componentProps = { x: y };

    return() {
        <>
        {componentsMap[what].map(Component => <Component {...componentProps} />)}
        </>
    }
}

您可以将 componentsMap 放在渲染方法之外，因为它不会改变。