在 React 中接受多个 child 的多个未知道具？

Question

我有多层组件，想将多个值从顶部组件向下传递到底部组件。我试图让中间和底部组件尽可能灵活，所以我没有明确写出它可以接受的每个参数。我怎么能做到这一点？谢谢。

...
export const Top = () => {
    return(
        <Middle
            botA={propA = true, propB = false} // Props cannot be
            botB={propA = 1, propB = 2}        // passed like this
        />
    );
}

...
export const Middle = ({botA, botB}) => {
    return(
        <BottomA {...botA} />
        <BottomB {...botB} />
    );
}

...
export const BottomA = ({...unknownProps}) => {
    // Do something with unknownProps
    return(
        ...
    );
}

...
export const BottomB = ({...unknownProps}) => {
    // Do something with unknownProps
    return(
        ...
    );
}

Answer 1

您的问题似乎是关于如何指定要作为道具本身传递的道具 object。首先，指定一个 object 和要传递给组件的 props，其次，将这个 object 作为 prop 传递给中间组件。

export const Top = () => {
  return(
    <Middle
      botA={{ propA: true, propB: false }}
      botB={{ propA: 1, propB: 2 }}
    />
  );
}

中间child解构props，然后将它们分散到合适的child组件中。

export const Middle = ({ botA, botB }) => {
  return(
    <BottomA {...botA} /> // ...{ propA: true, propB: false }
    <BottomB {...botB} /> // ...{ propA: 1, propB: 2 }
  );
}

Child 组件解构它们知道的 props，将其余的传播到一个 prop 中，即你正在调用的一个 unknownProps。

export const BottomA = ({ propA, propB, ...unknownProps }) => {
  return(
    ...
  );
}

如果您发现自己不断地通过中间组件传递这样的 props，一个称为“props 钻孔”的问题，那么您可能想要探索 React Context API。这是一个 API 和 resolve/alleviate 的设计模式 explicit/implicit 将 props 传递给不知道它们的中间组件的问题，坦率地说可能不应该。

Context provides a way to pass data through the component tree without having to pass props down manually at every level.

In a typical React application, data is passed top-down (parent to child) via props, but such usage can be cumbersome for certain types of props (e.g. locale preference, UI theme) that are required by many components within an application. Context provides a way to share values like these between components without having to explicitly pass a prop through every level of the tree.

在 React 中接受多个 child 的多个未知道具？

Accepting multiple unknown props for more than one child in React?

javascript

reactjs

react-native

react-props

Context provides a way to pass data through the component tree without having to pass props down manually at every level.