Пропустите родительский объект как реквизит для детей

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.

Учебный способ состоял в том, чтобы определить функции внутри родительского компонента как локальную функцию, которая обычно передается дочернему элементу как реквизит, как показано в комментариях в parent_component.js.jsx.

Я также передаю родительский объект, чтобы я мог использовать развязанную функцию, определенную в custom.js, чтобы сделать что-то вроде изменения состояния родительского объекта из ININ дочернего компонента.

В настоящее время он работает над моим приложением, но я не уверен, что передача родительского объекта в целом - это хорошо. Люблю слушать любые советы :) Спасибо заранее.

Answer 1

Nah. Передача всего родительского объекта, вероятно, не такая. Это связано с тем, что дочерний объект должен иметь слишком много знаний о внутренних компонентах родителя. Это в конечном итоге создает дополнительную сложность для проверки кода спагетти.

Вместо этого передайте конкретные обратные вызовы в качестве реквизита. Эти обратные вызовы необязательно должны быть методами из родительского компонента, но это часто делает их более легкими для тестирования.

Если у вас есть тонна обратных вызовов, имеет смысл группировать их в одном объекте, который передается в качестве опоры, но большинство приложений просто передают отдельные обратные вызовы явно.