如何从 React 根组件获取数据？ [复制]

Posted 2023-02-21

【中文标题】如何从 React 根组件获取数据？ [复制]

【英文标题】：How to get data from React root component? [duplicate]

【发布时间】：2015-12-18 23:00:04

【问题描述】：

这是我的代码：

var Form = React.createFactory(require('../views/Form'));

React.render(
    Form(
        mainData: data
    ),
    document.getElementById('main_form')
);

数据在'form'组件中传输，如何将更改的数据（mainData）获取到外部应用程序？知道该怎么做吗？

谢谢！

【问题讨论】：

您需要接受一个函数作为表单组件的属性。然后从表单组件内部，只要数据发生变化，您就可以调用该函数。此函数将从 Root 组件传入，因此您可以随意处理更改。

【参考方案1】：

您应该将事件处理程序传递给表单，并让表单在数据发生更改时调用此处理程序。

var Form = React.createFactory(require('../views/Form'));

React.render(
    Form(
        mainData: data,
        onChange: function(newData) 
            // Do stuff with the newly changed data here
        
    ),
    document.getElementById('main_form')
);

然后在表单组件定义中，将onChange属性作为prop。

var Form = React.createClass(
    getInitialProps: function() 
        mainData: [],
        onChange: null
    ,

    // Call this.props.onChange whenever data is changed
);

【讨论】：

J3Y，感谢您的回答！它节省了我的时间）