Question

我知道它是相当无证的功能，但由于react-router没有将道具传递给子路径组件的干净方法，我想使用上下文。

<Router history={history}>
    <Route component={Application} path="/(:id)">
        <IndexRoute component={EditDocument} />
    </Route>
</Router>

class Application extends Component {

    static childContextTypes = {
        charts: PT.array.isRequired,
    }

    getChildContext() {
        return { charts: this.getCharts() };
    }

    render() {
        return <div>{this.props.children}</div>
    }
}

class EditDocument extends Component {

    static contextTypes = {
        charts: PT.array.isRequired,
    }

    componentWillMount() {
        this.context.charts === undefined
    }
}

我现在正在使用React 0.13。这可以用0.14解决吗？

Answer 1

要将道具传递给您的组件，请在创建createElement之前覆盖Router Router方法：

const createElement = function(Component, props) {
   return <Component {...props} myProps={{your: 'props'}} />;
 };

<Router history={history} createElement={createElement}>
    <Route component={Application} path="/(:id)">
        <IndexRoute component={EditDocument} />
    </Route>
</Router>

这种方法对我们有用。可以使用RoutingContext在服务器上完成相同的操作。

Answer 2

您可以使用React Router createElement

您可以轻松地将其设置为选择性地将道具从路由器状态或您的应用状态传递到路由组件（如果您愿意，可以根据路由配置）。

Answer 3

您可以尝试{React.cloneElement（this.props.children，{someExtraProp：something}）}

所以你将其他内容传递给你的观点

e.g。

function renderApp(data) {

var React = require('react');
var ReactRouter = require('react-router');
var Router = ReactRouter.Router;

var App = React.createClass({

render: function () {

  return (

<AppShell>

        {React.cloneElement(this.props.children, {data:data})}

    </AppShell>
  );
}
});

var rootRoute = {
component: 'div',
childRoutes: [{
path: '/',
component: {App},
///etc
}]
};

React.render(

React.render（

 <Router routes={rootRoute}/>,
document.body

）;

,
document.body
);

}
renderApp(data);

希望有用，请告诉我是否需要更好地解释

将React contextTypes与react-router一起使用

3 个答案: