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

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,
                });
            }
        };
    }
}

Is it ok to use this instead of Redux or Context API with React?

Update: I think I missed to point out my expectation. I'm actually passing some service(http, localStorage) to childrens only when they asks for it. It's not only about the store as services don't have any state. But I also need to pass store through it.

https://pastebin.com/G3PgVxLn

Answer 1

Maybe this tweet by the Dan Abramov (React maintainer) might help.

I understand it was probably not the point of the article. But I see people reaching for Context or Redux because they don't realize components can take any children — and that often removes the need for deep prop passing. Would be great to highlight!

And Dave Ceddia posted a relavant React documentation link.
Composition vs Inheritance

You can read upon those two.

And here is a demo Nicolas Marcora created to show me how to pass properties to child/children.
You can pass props to children using React.cloneElement(child,...

Working demo on 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>
  }
}

You can use WithMouse class to pass props downward to all children and use it like following.

class App extends Component {
  ...

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

MouseTracker has access to props passed from WithMouse so you can just use it without directly passing it manually.

You can probably go further and pass all props instead of a few ( mouse , onMouseMove )