将 props 传递给每个组件

IT技术 reactjs react-router
2021-05-03 02:18:06

我正在通过一个类内部的 React Router 渲染一堆路由,我需要组件能够访问触发渲染的类的实例,因为它将包含一个服务工厂的实例等。

但是,我找不到任何关于将 props 传递给通过 React Router 渲染的组件的信息,或者对我更有用的信息,将 props 传递给通过 React Router 渲染的每个组件,以便它们可供使用。

这可能吗?如果是这样,如何?

我的代码的精简版:

var routes = {
  component : 'div',
  childRoutes : [{
    path      : '/',
    component : AppContainer
  }]
};

// Not a React Component. Need a value from here, to 
// be passed to the AppContainer
class App {
  render() {
   let foo = 'bar';

    ReactDom.render(
      <Router history={history}
              routes={routes} />,
      document.getElementById('container')
    );
  }
}

// Rendered via React Router
class AppContainer extends React.Component {
  render() {
    console.log(this.props.foo); //bar
    return <div>{this.props.foo}</div>;
  }
}
1个回答

如果您有一个根路由组件,您可以考虑一个非常简单的选项,如下所示:

export default React.createClass({
    render: function() {
      return React.cloneElement(this.props.children, { propValue: someValueHere });
    }
});

除了创建您给它的子组件同时传递您选择的一些额外props之外,这实际上什么都不做。它可能不会永远是您的解决方案,但我希望它足以让您开始。