设计模式 – 在reactjs中组件组合中使用道具的惯用方法是什么

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

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

例如(请参考图片)：我使用Y和Z组件编写了组件X.并将一个名为P的alt存储注入组件X,并通过组件Y将其作为prop传递给组件Z.在这种情况下,P商店不使用组件Y,但必须作为支柱传递给Y,因为它需要组件Z.

我觉得组件Z的道具要求破坏了组件Y的使用位置,因为该支柱实际上并不是由Y自己使用,只是传递给Z.什么是注入alt存储并将道具传递给子组件的惯用方法没有弄乱代码.有没有办法传递道具,将alt商店注入一个特定的地方,并在每个组件中使用而不通过整个组件树.

您可以通过使每个组件传递其所有道具来传递意外道具.

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')
);