하나의 구성 요소에서 다른 구성 요소로 객체를 반품합니다.

Question

나는 반응이 처음이므로 어떤 도움도 받으실 수 있습니다!

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 : 나는에 UserPage 구성 요소에서 링크 태그에서 개체를 전달할 수있는 방법

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; 

SchoolPage Component를 선택하여 사용하십시오.

저는 Link Tag를 통해 객체를 전달할 수 없다는 것을 조사하고 알았습니다. 그래서 React에서 어떻게 전달할 수 있습니까? 너의 도움을위한 Tks!

Answer 1

반응 라우터에서 경로를 내 보내야합니다. the example 을 참조하십시오. 하위 구성 요소가 this.props.params를 사용함을 볼 수 있습니다.

Answer 2

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) 구성 요소

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

에 mapStateToProps 기능을 추가 할 때와 당신에 의해 구성 요소 SchoolPage는 다음을 사용하여 개체를 얻을 수 있습니다.

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

이 방법을 사용하면 Redux 저장소를 구성하고 디스패치 조치를 작성하고 자체 축소판을 만드는 방법을 배워야합니다.

행운을 빈다.

Answer 3

당신이 인증을 구현하기 위해 노력하고 사용자의 이름을 저장하려고 또는 유사한 세부 사항은 로컬 스토리지 를 사용할 수 있습니다 더 사용하는 경우 예를 들어

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

또는

당신이 가져올 수/레이아웃 구성 요소와 {this.props를 사용하여 UserPage 또는 SchoolPage를 렌더링 할 때이 값을 가져옵니다.children} React.cloneElement를 사용하여 가져온 데이터를 모든 렌더링 된 구성 요소에 소품으로 추가 할 수 있습니다. 이것에 대한 REDUX를 사용하여 레이아웃

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

내부 예를 들어 은 분명 방금 반응으로 시작보고 추가합니다 복잡성에 의해 잔인한 것입니다.