将对象从一个组件传递到另一个组件In React

我是React的新手，因此任何帮助将不胜感激！将对象从一个组件传递到另一个组件In React

UserPage.js：

import React, { Component } from 'react'; 
import { Link } from 'react-router'; 
import request from 'superagent'; 

export default class UserPage extends Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
      listSchool: [] 
     }; 
    } 

    componentWillMount() { 
     let self = this; 
     request 
      .get('/api/schools/') 
      .set('Accept', 'application/json') 
      .end(function (err, res) { 
       self.setState({ 'listSchool': res.body }); 
       console.log(self); 
      }); 
    } 

    render() { 
     let marginLeft = { 
      marginLeft: "10px" 
     }; 

     return (
      <div className="container"> 
       <form className="form-inline"> 
        <div className="form-group"> 
         Xin chào: <label style={marginLeft}>{this.props.location.state.name} </label> 
         <div className="btn-group" style={marginLeft}> 
          <button type="button" className="btn btn-info">Choose Your School</button> 
          <button type="button" className="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
           <span className="caret"></span> 
           <span className="sr-only">Toggle Dropdown</span> 
          </button> 
          <ul className="dropdown-menu"> 
           { 
            this.state.listSchool.map(school => { 
             return (
              <li key={school._id}> 
               <Link to={`schools/${school._id}`} 
                params={ 
                 { 
                  user : { 
                   id : this.props.location.state.id, 
                   name : this.props.location.state.name, 
                  }, 
                  school : { 
                   id : school._id, 
                   name : school.TenTruong 
                  } 
                 } 
                }> 
                {school.TenTruong} 
               </Link> 
              </li> 
             ); 
            }) 
           } 
          </ul> 
         </div> 
        </div> 
       </form> 
      </div> 
     ); 
    } 
}

SchoolPage.js：

import React, { Component } from 'react'; 

export default class SchoolPage extends Component { 

    constructor(props) { 
     super(props); 
     this.state = { 
      user : {}, 
      school : {}, 
     }; 
    } 

    componentWillMount() { 
     console.log(this.props); 
    } 

    render() { 
     return (
      <div> 
       Hello {this.props.params.id} 
      </div> 
     ); 
    } 
}

routes.js：

import React from 'react'; 
import { Route, IndexRoute } from 'react-router'; 
import Layout from './components/Layout'; 
import IndexPage from './components/IndexPage'; 
import UserPage from './components/UserPage'; 
import SchoolPage from './components/SchoolPage'; 

const routes = (
    <Route path="/" component={Layout}> 
     <IndexRoute component={IndexPage}></IndexRoute> 
     <Route path="users/:id" component={UserPage}></Route> 
     <Route path="schools/:id" component={SchoolPage}></Route> 
    </Route> 
); 

export default routes;

如何传递的对象从链接标签从UserPage的Component SchoolPage组件并使用它。

我已经搜索并知道这是不可能通过链接标记传递一个对象，所以在React我怎么能通过它。 Tks为您提供帮助！

来源

2017-02-13 M.Tae

您应该从react-router中导出路由。请参阅the example 您可以看到子组件使用this.props.params。

来源

2017-02-13 07:12:44 viktarpunko

我的意思是如何将1个对象从UserPage组件传递给SchoolPage组件 –

@ M.Tae我认为从Link中是不可能的。你可以通过应用商店的id来获得一些对象。你可以在你的SchoolPage组件上为它写一个容器。 – viktarpunko

您可以使用Redux存储。您需要配置商店，添加调度动作和减速器。然后你就可以到任何组件之间发送数据：

UserPage

1）导入sendObjectToSchoolPage派遣行动

2）添加mapDispatchToProps功能

function mapDispatchToProps(dispatch) { 
    return { 
     passMyOwnObject(obj) { 
     dispatch(sendObjectToSchoolPage(obj)); // sendObjectToSchoolPage is your dispatch action 
     } 
    }; 
}

，并从UserPage组件你调用这样的调度动作：

this.props.passMyOwnObject({ name : ABC });

SchoolPage

您需要定义：

1）myOwnObject作为PropTypes.object

2）添加mapStateToProps功能，您的组件

function mapStateToProps(state){ // this allows you to get any object from Redux store 
    return { 
    myOwnObject: getMyOwnObjectFromStore(state) // getMyOwnObjectFromStore is your reducer 
    }; 
}

和你可以在你的组件中使用SchoolPage得到你的对象：

const myObject = this.props.myOwnObject; // myObject has { name : ABC }

通过这种方法，您需要学习如何配置您的Redux商店，创建您的调度操作并创建自己的reducer。

祝你好运！

来源

2017-02-13 07:43:02

Tks bro，你可以告诉我怎么做，或者一个关于Redux的简单例子。我很新与React :( –

如果你试图实现身份验证，然后试图保存用户名或类似的细节进一步使用您可以使用localStorage的如

localStorage.name = data.name 
localStorage.email = data.email

你可以获取/在布局组件中获取这些值，并使用{this.props来渲染UserPage或SchoolPage。children}你可以使用React.cloneElement将获取的数据作为道具添加到所有呈现的组件中。如内使用终极版此布局

render(){ 
    const childrenWithProps = React.Children.map(this.props.children, 
    (child) => React.cloneElement(child, { 
    name: data.name, 
    email: data.email 
    }) 
    ); 
    return (
    <div>{childrenwithprops}</div>) 
    }

显然是由它增加了看你是刚开始反应复杂矫枉过正。

来源

2017-02-13 07:51:15

将对象从一个组件传递到另一个组件In React

回答

相关问题