Reactjs 将React contextTypes与React路由器一起使用

我知道这是一个没有文档记录的特性，但是由于

react路由器

没有干净的方式将道具传递给子路由组件，所以我想使用上下文

<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
    }
}

类应用程序扩展组件{
静态childContextTypes={
图表：PT.array.isRequired，
}
getChildContext（）{
返回{charts:this.getCharts（）}；
}
render（）{
返回{this.props.children}
}
}
类EditDocument扩展组件{
静态上下文类型={
图表：PT.array.isRequired，
}
组件willmount（）{
this.context.charts==未定义
}
}

我现在使用的是React 0.13。使用0.14可以解决这个问题吗？

您可以使用React路由器

您可以轻松设置它，以便有选择地将道具从路由器状态或应用程序状态传递到路由组件（如果您愿意，则基于路由配置）

---

要向组件传递道具，请在创建

路由器之前覆盖
路由器的
createElement
方法：

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>

const createElement=函数（组件、道具）{
返回；
};

这种方法对我们有效。同样可以在服务器上使用
RoutingContext
执行此操作，您可以尝试{React.cloneElement（this.props.children，{someextrop:someone}}

因此，您可以向视图传递其他内容

e、 g

希望这是有用的，如果我需要更好地解释，请告诉我这些问题可能值得一看，是的，我已经看到了，但我仍然不知道如何使用它。您无法在该函数中访问父道具。答案与@knowbody相同，因此响应相同。创建路由器时，我无法访问请求的道具。它们基本上是在应用程序组件中创建的。使用
createElement
我无法访问这些。好了，现在我明白你的意思了。奇怪的是，我们的应用程序完全按照您的代码进行设置，并且可以正常工作。不同的是我们使用自己的createElement，我们使用react 0.14-rc1。是的，我在其他地方发现了cloneElement。它工作得最好。我只是觉得这不是一个“干净”的解决方案。
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(

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

,
document.body
);

}
renderApp(data);