加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

reactjs – 如何使用react-router将this.state和this.props传递

发布时间:2020-12-15 20:49:55 所属栏目:百科 来源:网络整理
导读:我无法弄清楚如何从我的后期路由和组件中的父ReactJS组件访问方法.使用react-router. 这是在 RouteHandler {... this.state} / 方法/函数pushToPostList()将post对象添加到数组中,保存在this.state.myList中. 试着让我的 Post /组件工作,所以它调用this.prop
我无法弄清楚如何从我的后期路由和组件中的父ReactJS组件访问方法.使用react-router.

这是在
< RouteHandler {... this.state} />

方法/函数pushToPostList()将post对象添加到数组中,保存在this.state.myList中.

试着让我的< Post />组件工作,所以它调用this.props.pushToPostList(newPost)更新< App />中的this.state.myList

路由器是:

var routes = (
  <Route handler={App} >
    <DefaultRoute handler={SignUp} />
    <Route name="feed" path="feed" handler={LatestFeed} />
    <Route name="post" path="post" handler={Post} pushToPostList={this.pushToPostList} />
  </Route>
);


Router.run(routes,function (Handler) {
  React.render(<Handler />,document.body );
});

更多代码:

var App = React.createClass({

    getInitialState: function() {
        return {
            myList: []
        };
    },pushToPostList: function (object) {
        if (object) { 
          var myTempPosts = this.state.myPostList;
          myTempPosts.push(object); 
          this.setState( {myPostList: myTempPosts} );
        }
    },render: function() {        
        return (
            <div>
                <RouteHandler {...this.state} />
            </div>
        );
    }
});


var Post = React.createClass({

    handleSubmit: function(e) {
        e.preventDefault();

        var myPostTxt = this.refs.myPostTxt.getDOMNode().value.trim();
        this.props.pushToPostList( myPostTxt ); // Send object to parent ReactJS component.

    },render: function() {
        return (
            <div>
                Post.

                <textarea 
                  ref="myPostTxt" />

                <p />
                <button onClick={this.handleSubmit} type="submit">Post</button>

            </div>
        );
    }
});
将pushToPostList = {this.pushToPostList}移动到App Class.
var App = React.createClass({

getInitialState: function() {
    return {
        myList: []
    };
},pushToPostList: function (object) {
    if (object) { 
      var myTempPosts = this.state.myPostList;
      myTempPosts.push(object); 
      this.setState( {myPostList: myTempPosts} );
    }
},render: function() {        
    return (
        <div>
            <RouteHandler {...this.state} pushToPostList={this.pushToPostList} />
        </div>
    );
}
});

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读