Question

我是React的新手，所以任何帮助都会受到赞赏！

UserPage.js：

    <select name="contact_type1" class="form-control">
    <?php 
        foreach($row_data as $row_val)
        {
            echo '<option value="'.$row_val[id].'">'.$row_val[d_name] . '</option>';
        }
    ?>  
    </select>
    <select name="contact_type2" class="form-control">
    <?php 
        foreach($row_data as $row_val)
        {
            echo '<option value="'.$row_val[id].'">'.$row_val[d_name] . '</option>';
        }
    ?>  
    <select name="contact_type3" class="form-control">
    <?php 
        foreach($row_data as $row_val)
        {
            echo '<option value="'.$row_val[id].'">'.$row_val[d_name] . '</option>';
        }
    ?>  
     </select>

SchoolPage.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>
        );
    }
}

routes.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>
        );
    }
}

如何将对象从LinkPage标记从UserPage Component传递到SchoolPage Component并使用它。

我已经搜索并知道通过Link标签传递对象是不可能的，因此在React中我如何传递它。求你帮忙！

Answer 1

您应该从react-router导出Route。见the example 您可以看到子组件使用this.props.params。

Answer 2

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

<强> 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 
  };
}

您可以在组件中使用：

在您的组件中获取您的对象

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

通过这种方法，您需要了解如何配置Redux存储，创建调度操作以及创建自己的Reducer。

祝你好运！

Answer 3

如果您尝试实施身份验证，然后尝试保存用户名或类似的详细信息以便进一步使用，您可以使用localStorage e.g

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

OR

您可以在布局组件中获取/获取这些值，当您使用{this.props.children}渲染UserPage或SchoolPage时，您可以使用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对于你刚刚开始反应时所带来的复杂性显然是一种过度杀伤。

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

3 个答案: