Question

export function injectProps() {
    const injects = {store: new Store()}; // some store

    return function (Component) {
        return class Proxy extends React.Component {
            render() {
                return React.createElement(Component, {
                    ...injects,
                    ...this.props,
                });
            }
        };
    }
}

可以在React中使用它代替Redux或Context API吗？

更新：我想我没能指出我的期望。我实际上只是在儿童要求时才将某些服务（http，localStorage）传递给儿童。这不仅与商店有关，因为服务没有任何状态。但是我还需要通过它。

https://pastebin.com/G3PgVxLn

Answer 1

也许 {em> 的this tweet可能会有所帮助。

我知道这可能不是本文的重点。但我明白了接触Context或Redux的人，因为他们没有意识到组件可以带走任何孩子，而这通常消除了对深深的支柱传递。突出显示会很棒！

Dave Ceddia发布了一个相对不错的React文档链接。
Composition vs Inheritance

您可以阅读这两本书。

这是一个演示Nicolas Marcora，演示了如何向孩子传递属性。
您可以使用React.cloneElement(child,...

将道具传递给孩子

在StackBlitz上的演示。

export default class WithMouse extends React.Component {
  state = { x: 0, y: 0 }

  handleMouseMove = event => { ... }

  render() {
    const { children } = this.props
    const childElements = React.Children.map(children, child =>
      React.cloneElement(child, { 
        mouse: this.state,
        onMouseMove: this.handleMouseMove 
      })
    )
    return <div>
      { childElements }
    </div>
  }
}

您可以使用WithMouse类将道具向下传递给所有孩子，并像下面那样使用它。

class App extends Component {
  ...

  render() {
    return (
      <WithMouse>
        <MouseTracker />
      </WithMouse>
    );
  }
}

MouseTracker可以访问从WithMouse传递过来的道具，因此您可以直接使用它而无需直接手动传递它。

您可能可以走得更远，并通过所有道具，而不是几个（mouse，onMouseMove）

是否可以使用包装器组件在React中传递道具？

1 个答案: