在 reactjs 的组件中使用 props 的惯用方式是什么

Question

尊敬的建筑师/设计专家，

我正在使用 Alt Js 来注入存储和操作以响应本机组件。在这种情况下，一些存储的属性并没有在整个组件树中使用，而只是被一些更深层次的组件使用。

例如（请参考图片）：我使用Y 和Z 组件组成了组件X。并将一个名为P 的alt store 注入到组件X 中，并通过组件Y 作为道具将其传递给组件Z。在这种情况下，P 存储不被组件 Y 使用，但必须作为道具传递给 Y，因为它需要组件 Z

我觉得组件 Z 的 prop 要求破坏了组件 Y 的使用场所，因为 Y 本身并没有使用该 prop，只是传递给 Z。在不弄乱代码的情况下，注入 alt 存储并将道具传递给子组件的惯用方法是什么。有没有办法传递 props，将 alt 存储注入到一个特定位置并在每个组件中使用，而无需通过整个组件树。

Answer 1

您可以通过让每个组件传递其所有道具来传递意外的道具。

function ComponentX(props) {
  const { p } = props;
  // use p here
  return <ComponentY {...props} />;
}

function ComponentY(props) {
  // don't use props.p here
  return <ComponentZ {...props} />;
}

function ComponentZ(props) {
  const { p } = this.props;
  return <span>{p}</span>
}

render(
  <ComponentX p={true} />,
  document.getElementById('app')
);

但是，如果您要通过组件向下传递商店，那么您可能想从react-redux 的书中学习并改用the context mechanism。

设计一个使用 store 初始化的 provider 组件（示例直接来自 react-redux）。事实上，您几乎可以肯定地使用react-redux 来传递您的商店。

export default class Provider extends Component {
  getChildContext() {
    return { store: this.store }
  }
  constructor(props, context) {
    super(props, context)
    this.store = props.store
  }

  render() {
    return Children.only(this.props.children)
  }
}

然后将您的最顶层组件包装在您的提供程序中，所有它（以及它的子项）都将能够通过上下文访问商店。

function ComponentX(props, context) {
  const { foo } = context.store;
  return <div>{foo}</div>;
}

render(
  <Provider store={yourStore}>
    <ComponentX />
  </Provider>,
  document.getElementById('app')
);

Answer 2

一般来说，您希望您的组件尽可能地隔离。通过在最顶部编写一个大组件来接收所有道具并将它们向下传递，您将所有组件紧密耦合在一起。

在您的示例中，您的 <Z/> 组件“依赖”于 <Y/> 组件，而后者又“依赖”于连接到商店的 <X/> 组件。

如果你想在别处使用你的 <Z/> 组件，你将不得不复制一些类似的层次结构，因为它不是一个“独立”组件，它是一个 “component-that-depend-on-some-other- component-higher-connected-to-store".

我不知道 Alt JS，但在react-redux 中，这种理念是将您的组件连接到存储区，因为它们需要数据。每当您看到自己在不使用此 props 的情况下传递 props 时，这表明您应该将组件连接到 store。

在您的示例中，您可以编写如下内容：

*（伪代码，我不懂Alt JS）：*

<AltJS store={store}>  //let's say AltJs is a component that expose the store via context
    <X>
        <Y>
            <Z p={p received from store}/>
        </Y>
    </X>    
</AltJS/>