Question

我是ReactJS的新手。我希望能够设置React组件的一些属性，然后能够从父React组件访问它。但我不完全确定如何做到这一点。例如，请考虑以下两个类：

export default class SubWindow extends React.Component {

    click(event)
    {
        this.myCollection.push({name:'receiptNum',value:$(event.currentTarget).html()});
    }

    render()
    {
        return (
        <ul>
            <li onClick={this.click.bind(this)}>0</li>
            <li onClick={this.click.bind(this)}>1</li>
            <li onClick={this.click.bind(this)}>2</li>
            <li onClick={this.click.bind(this)}>3</li>
        </ul>
        );

    }

}



export default class MainWindow extends React.Component {

    click(event)
    {
        console.log(SubWindow.myCollection);
    }

    render()
    {
        const SubWindow = require('./SubWindow').default;
        return (
            <SubWindow />
            <button onClick={this.click}>Log subwindow array</button>
        );

    }

}

基本上，我希望SubWindow有一个名为myCollection的属性，它只是一个JSON对象数组。每次点击列表项都会填充myCollection。

稍后，当我按下父窗口中的按钮时，我希望能够console.log(SubWindow.myCollection)。 我的问题如何从父反应组件访问SubWindow.myCollection？

Answer 1

我建议您使用回调来解决此问题。 MainWindow正在创建SubWindow，您可以在此处将回调函数作为属性。例如：

<SubWindow onClick={this.onSubwindowClick} />

现在在SubWindow课程中，只需在click函数中调用此回调：

click(event)
    {
        this.myCollection.push({name:'receiptNum',value:$(event.currentTarget).html()});
        this.props.onClick(/* data you want to pass to the parent */);
    }

您还必须在班级onSubwindowClick中定义MainWindow。这个函数应该从子类中接收你想要的任何数据 - 你从我放置评论/* data you want to pass to the parent */的孩子那里传递的数据。

另外，请勿忘记将this绑定到onSubwindowClick函数。这通常在类的constructor中完成，我建议您为每个组件创建。

你可以找到关于＆＃34;将数据传递给父母＆＃34;的好例子。在React的页面上。您可以查看文章Thinking in React，特别是＆＃34;步骤5：添加逆数据流＆＃34;。

Answer 2

只是将一个函数传递给你的子组件，并且该函数绑定到父组件＆＃39; s＆＃39;这实际上你只是创建了一个闭包。

然后在你的父组件中，函数的args在你的子组件中传递，同时你的父组件的范围可以访问args，所以在父范围内你可以访问数据在儿童范围内。

如何访问来自父反应组件的子反应组件中的数据

2 个答案: