Question

如果重复，我很抱歉。我正在将父函数传递给子节点，但是当我在子节点中使用此方法时，它会给我这个错误 _this2.props.changeAppMode不是函数

我尝试过stackover flow已经回答了问题，但无法解决它。我是新手，所以可能是我错过了一些其他的概念

以下是我的组件

父组件

class Users extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            currentMode: 'read',
            userId: null
        };

        this.changeAppMode = this.changeAppMode.bind(this);
    }

    changeAppMode(newMode, userId) {
        this.setState({currentMode: newMode});

        if (userId !== undefined) {
            this.setState({userId: userId});
        }
    }

    render() {

        var modeComponent =
            <ReadUserComponent
                changeAppMode={this.changeAppMode}/>;

        switch (this.state.currentMode) {
            case 'read':
                break;
            case 'readOne':
                modeComponent = <ViewUser />;
                break;
            default:
                break;
        }

        return modeComponent;
    }
}
export default Users;

子

class ReadUserComponent extends React.Component {
    constructor(props) {
        super(props);
        console.log(props);
    };

    componentDidMount() {
        this.props.fetchUsers();
    }

    render(){
        const users = this.props.users;
        return (
            <div className='overflow-hidden'>
                <h1>Users List </h1>
                <TopActionsComponent changeAppMode={this.props.changeAppMode} />

                <UsersTable
                    users={users}
                    changeAppMode={this.props.changeAppMode} />
            </div>
        );
    }
}

ReadUserComponent.propTypes = {
    users: React.PropTypes.array.isRequired,
    fetchUsers: React.PropTypes.func.isRequired
}

function mapStateToProps(state) {
    return {
        users: state.users
    }
}

export default connect(mapStateToProps, { fetchUsers })(ReadUserComponent);

孩子的孩子[这个组件叫父母功能]

class TopActionsComponent extends React.Component {
    render() {
        return (
            <div>
                <a href='#'
                   onClick={() => this.props.changeAppMode('create')}
                   className='btn btn-primary margin-bottom-1em'> Create product
                </a>
            </div>
        );
    }
}

导出默认TopActionsComponent;

感谢您的期待。非常感谢您的帮助

对不起，如果它是重复但我有点陷入其中

Answer 1

我认为它与子组件中的绑定有关。你可以在将道具传递给子组件时尝试下面的代码。 <TopActionsComponent changeAppMode={::this.props.changeAppMode} />

Answer 2

试试这个，它解决了我面临的同样问题。

在ReadUserComponent组件中：

<TopActionsComponent changeAppMode={this.changeAppMode.bind(this)} />

在ReadUserComponent中定义此函数：

changeAppMode(type){
    this.props.changeAppMode(type);
}

在TopActionsComponent组件中：

<a href='#' onClick={this.changeAppMode.bind(this,'create')}
   className='btn btn-primary margin-bottom-1em'> Create product
</a>

在TopActionsComponent组件中定义此函数：

changeAppMode(type){
   this.props.changeAppMode(type);
}

Answer 3

好。试试这个。我认为它应该有用。

<ReadUserComponent changeAppMode={() => this.changeAppMode}/>;

<UsersTable users={users} changeAppMode={() => this.props.changeAppMode} />

ReactJs调用父函数

3 个答案: