Question

我很反应。只需单击一个按钮，即可选择学生（此部分可以使用）。我想将该名称传递给子组件'bigProfile'，但我无法让它工作。

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

感谢@Jayabalaji J的回答我现在有一个app组件如下：

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);

大概要分量如下：

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（...）：获取状态变量的对象进行更新或者返回状态变量对象的函数。”它引用了BigProfile中的这一行：

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

Answer 1

你需要在这里改变道具状态

使用此：

`

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

除了@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;

Answer 3

您可以尝试此代码

＆＃13;

spark-submit --master mesos://path/to/service/spark --deploy-mode cluster --jars src/jars/elasticsearch-spark-someversion.jar --py-files http://somedomainforfileserving/src.zip  http://somedomainforfileserving/main.py

＆＃13;

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

3 个答案: