Пропустить объект от одного компонента к другому в реакторе

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:

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; 

Как я могу передать объект от Link тега из UserPage компонента в Компонент SchoolPage и используйте его.

Я искал и знал, что невозможно передать объект через тег Link, поэтому в React, как я могу его передать. Tks за вашу помощь!

Answer 1

Вы должны экспортировать маршрут из реактивного маршрутизатора. См. the example Вы можете видеть, что компонент children использует 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) добавить функцию 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, создать свое действие отправки и создать собственные редукторы.

Удачи вам!

Answer 3

Если вы пытаетесь осуществить проверку подлинности, а затем пытается сохранить имя пользователя или аналогичные данные, чтобы использовать в дальнейшем вы можете использовать LocalStorage например

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

ИЛИ

вы можете получить/получить эти значения в компоненте макета и при рендеринге UserPage или SchoolPage с помощью {this.props.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>) 
    } 

с использованием Redux для этого, безусловно, будет излишней сложностью он добавляет видящую вы только начинаете с среагировать.