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

Question

I am new to React so any help would be appreciated !

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;

How can I pass the object from Link tag from UserPage Component to SchoolPage Component and use it.

I have searched and knew that was impossible to pass an object through Link tag so in React how can I pass it. Tks for your help!

Answer 1

You should export Route from react-router. See the example You can see as the children component uses this.props.params.

Answer 2

You can use Redux store. You need to configure store, add dispatch action and reducer. And then you can to send data between any components:

UserPage

1) import your sendObjectToSchoolPage dispatch action

2) add mapDispatchToProps function

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

and from your UserPage component you invoke this dispatch action like that:

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

SchoolPage

You need to define:

1) myOwnObject as a PropTypes.object

2) add mapStateToProps function to your component

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

and by that you can in your component SchoolPage get your object by using:

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

By this approach you need to learn how to configure your Redux store, create your dispatch action and create own reducers.

Good luck!

Answer 3

If you are trying to implement authentication and then trying to save the name of the user or similar details to use further you can either use localStorage eg

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

OR

you can fetch/get these values in the layout component and when you render UserPage or SchoolPage using {this.props.children} u can use React.cloneElement to add those fetched data as props to all the rendered components. eg inside Layout

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

using redux for this would clearly be an overkill by the complexity it adds seeing you are just starting with react.