单击兄弟组件后如何将道具传递给组件

Question

我是新手反应。单击一个按钮，选择一个学生（这部分有效）。我想将该名称传递给子组件 'bigProfile'，但我无法让它工作。

我正在这个分支上工作：https://github.com/smilingkite/REACT-Evaluation-Tool-for-Teachers/tree/button

感谢@Jayabalaji J 的回答，我现在有一个应用程序组件如下：

import React, { Component } from 'react';
import { connect } from 'react-redux';
import BigProfile from './components/bigProfile';
import fetchStudents from './actions/fetch';
import BigButton from './components/bigButton';
import ProfileListContainer from './components/profileListContainer';

export class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            studentName: ''
        };
    }

    pickStudent(array) {
        var index = Math.floor(Math.random() * array.length);
        var student = array[index];
        var studentName = student.name;
        this.setState({ studentName: student.name });
        console.log(studentName);
    }

    componentWillMount() {
        this.props.fetchStudents();
    }

    render() {
        const { students } = this.props;
        return (
            <div className="App">
                <BigProfile name={this.state.studentName} />
                <BigButton
                    onClick={() =>
                        this.pickStudent(selectStudentGroup(students, pickColor()))}
                />
                <ProfileListContainer />
            </div>
        );
    }
}
const mapStateToProps = store => {
    return {
        students: store.students
    };
};
export default connect(mapStateToProps, { fetchStudents })(App);

big profile组件如下：

import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';

class BigProfile extends PureComponent {

    static propTypes = {
        name: PropTypes.string.isRequired
    };

    static defaultProps = {
        name: '...'
    };

    componentWillReceiveProps(nextProps) {
        if (this.props.name !== nextProps.name) {
            this.setState((this.props.name: nextProps.name));
        }
    }
    render() {
        console.log('this.props (in render): ', this.props.name);
        return (
            <h1>
                {'Ask a question of: '}
                {this.props.name}
            </h1>
        );
    }
}
export default BigProfile;

单击 bigButton 后出现以下错误："setState(...): takes an object of state variables to update or a function which returns an object of state variables." 它指的是 BigProfile 中的这一行：

this.setState((this.props.name: nextProps.name));

Answer 1

您需要更改 props 以在此处声明

使用这个：

import React, { Component } from 'react';
import { connect } from 'react-redux';
import BigProfile from './components/bigProfile';
import fetchStudents from './actions/fetch';
import BigButton from './components/bigButton';
import ProfileListContainer from './components/profileListContainer';

export class App extends Component {

    constructor(props) {
        super(props);
        this.state = {
          studentName: '' //You can set the initial student Name as you wish
        }
        this.pickStudent = this.pickStudent.bind(this);
    }

    pickStudent(array) {
        var index = Math.floor(Math.random() * array.length);
        var student = array[index];
        var studentName = student.name;
        this.setState({ studentName: student.name });
        console.log(studentName);
    }

    componentWillMount() {
        this.props.fetchStudents();
    }

    render() {
        const { students } = this.props;
        return (
            <div className="App">
                <BigProfile name={this.props.studentName} />
                <BigButton
                    onClick={() =>
                        this.pickStudent(selectStudentGroup(students, pickColor()))}
                />
                <ProfileListContainer />
            </div>
        );
    }
}
const mapStateToProps = store => {
    return {
        students: store.students
    };
};
export default connect(mapStateToProps, { fetchStudents })(App);

Answer 2

你可以试试这个代码

import React, { Component } from 'react';
import { connect } from 'react-redux';
import BigProfile from './components/bigProfile';
import fetchStudents from './actions/fetch';
import BigButton from './components/bigButton';
import ProfileListContainer from './components/profileListContainer';

export class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            studentName: ''
        };
    }

    pickStudent(array) {
        var index = Math.floor(Math.random() * array.length);
        var student = array[index];
        var studentName = student.name;
        this.setState({ studentName: student.name });
        this['studentName'] = studentName;
        console.log(studentName);
    }

    componentWillMount() {
        this.props.fetchStudents();
    }

    render() {
        const { students } = this.props;
        return (
            <div className="App">
                <BigProfile name={this['studentName']} />
                <BigButton
                    onClick={() =>
                        this.pickStudent(selectStudentGroup(students, pickColor()))}
                />
                <ProfileListContainer />
            </div>
        );
    }
}
const mapStateToProps = store => {
    return {
        students: store.students
    };
};
export default connect(mapStateToProps, { fetchStudents })(App);

Answer 3

除了@Jayabalaji J 的回答，我只需要简化我的 bigProfile 组件如下：

import React, { PureComponent } from 'react'; 
import PropTypes from 'prop-types';

class BigProfile extends PureComponent {    
static propTypes = {        name: PropTypes.string.isRequired   };

render() {      
return (            <h1>
    {'Ask a question of: '}
    {this.props.name}           </h1>       );  } } 

export default BigProfile;

单击兄弟组件后如何将道具传递给组件

how to pass props to component after click on sibling component

reactjs

redux

react-props