Question

亲爱的建筑师/设计专家，

我使用Alt Js注入商店和操作以响应本机组件。在这种情况下，一些存储的属性不是在整个组件树中使用，而是仅由一些处于更深层次的组件使用。

例如（请参阅图片）：我使用X和Y组件编写了组件Z。并将一个名为P的alt商店注入组件X，然后通过组件Z将其作为道具传递给组件Y。在这种情况下，P商店未按组件Y使用，但必须作为道具传递给Y，因为它需要组件Z

我觉得组件Z的道具要求破坏了组件Y的使用位置，因为该道具实际上并未由Y使用，只是传递给{{ 1}}。注入alt存储并将道具传递给子组件的惯用方法是什么，而不会弄乱代码。有没有办法传递道具，将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。

设计一个使用商店初始化的提供程序组件（示例直接来自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/>组件。

如果您想在其他地方使用<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/>组件，则必须重现一些类似的层次结构，因为它不是“独立”组件，而是“组件 - 依赖于某些 - 其它部件更高连接到存储“

我不知道Alt JS，但在react-redux中，这种理念是将组件连接到商店，尽可能接近数据。任何时候你看到自己传递道具而不使用这个道具，这是一个很好的指标，你应该将你的组件连接到商店。

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

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

Option

在reactjs中组件组合中使用道具的惯用方法是什么？

2 个答案: