通过父对象本身作为儿童的道具

我意识到我在我的父组件jsx文件中定义了太多的函数，所以我想重构它并在另一个文件中定义函数。

# application.js 
//= require_self 
//= require react 
//= require react_ujs 
//= require components 
//= require_tree . 
window.myApp = {} 

# custom.js 
myApp.sayLol = function(parentComponent) { 
    alert("LOL"); 
    parentComponent.setState({something: 'something'}); 
} 

# parent_component.js.jsx 
var ParentComponent = React.createClass({ 
    // sayLol: function(){ 
    // alert("LOL"); 
    // this.setState({something: 'something'}); 
    // }, 
    render: function(){ 
    // return (<ChildComponent sayLol={this.sayLol} />); 
    return (<ChildComponent parentComponent={this} />); 
    } 
}) 

# child_component.js.jsx 
var ChildComponent = React.createClass({ 
    handleClick: function(){ 
    myApp.sayLol(this.props.parentComponent); 
    }, 
    render: function(){ 
    return (<div onClick={this.handleClick}>say LOL</div>) 
    } 
})

所以我所做的就是定义的功能，即sayLol()，该成分会在一个单独的custom.js文件来调用。

教程的方式是将父组件内部的函数定义为本地函数，通常作为道具传递给子项，如parent_component.js.jsx中的注释所示。

我还传递父对象，以便我可以使用custom.js中定义的解耦函数来执行某些操作，例如将父对象的状态从子组件中更改。

它目前正在处理我的应用程序，但我不确定是否将父对象本身作为整体传递是件好事。爱听到任何建议:)在此先感谢。

来源

2016-01-12 Vic

Nah。传递整个父对象可能不是想要的。这是因为子对象必须对父内部有太多的知识。这最终会产生额外的难度来测试意大利面代码。

取而代之的是传递特定的回调作为道具。这些回调不一定需要来自父组件的方法，但这通常会使它们更容易测试。

如果你有大量的回调，将它们分组到一个单独的对象中，这些对象可以作为道具传递，但大多数应用只是明确地传递单个回调。

来源

2016-01-12 16:50:35 mjhm

通过父对象本身作为儿童的道具

回答

相关问题