路由是这样的
2
220
App代码是这样的
const App = React.createClass({
getInitialState: function() {
return {id: null};
},
componentDidMount: function() {
$.get("api", function(data) {
if (this.isMounted()) this.setState(data);
}.bind(this));
},
render: function() {
// 这个是想了好久想到的通过App给AppIndex组件传递数据的方式
this.props.children.props.id = this.state.id;
console.log("render App");
return (
// ....
{this.props.children}
);
},
});然后AppIndex是这样的
const AppIndex = React.createClass({
render: function() {
console.log("render AppIndex");
console.log(this.props.id);
return {this.props.id || "NULL"}
;
},
});这样子运行之后，控制台的输出为
render App
render AppIndex
null
render App页面中AppIndex显示的是NULL，除非点击AppIndex的路由导致AppIndex的render才会正确显示id属性。
到底这个App和AppIndex应该怎么样通信？或者如何在App重新渲染的时候自动重新渲染AppIndex哪怕路由没有改变？
Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
id传递至子组件props中。好几处问题，这和 route 没关系
那四和输出，前两应该你也理解了，第三行肯定输出 null 啊，
state.id初始化是本来就是 null，你用$.get异步赋值前 AppIndex 早就 render 了，这时候肯定是 null 啊；$.get异步给state赋值，此时App会 render，所以会有第四行的输出；this.props.children.props.id = this.state.id;不建议这样传值，props 规范是只读，实际这样做也是错的；你那个
$.get获取的数据只是在AppIndex里用，为什么不放在AppIndex里呢？你先看看 reactjs 好的例子，理解一下思路。