Question

我正在使用导轨而没有助焊剂。

我意识到我在父组件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。

教程的方法是将父组件内的函数定义为本地函数，它通常作为props传递给子元素，如parent_component.js.jsx中的注释所示。

我也传递了父对象，这样我就可以使用custom.js中定义的解耦函数来做一些事情，比如从子组件的WITHIN中改变父对象的状态。

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

Answer 1

罗。传递整个父对象可能不是想要的。这是因为子对象必须对父进程的内部有太多的了解。这最终会产生额外难以测试的意大利面条代码。

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

如果您有大量的回调，将它们组合在一个作为道具传递的单个对象中可能是有意义的，但大多数应用只是明确地传递单个回调。

将父对象本身作为道具传递给子

1 个答案: