ReactJS - лучше предоставить параметр из дочернего компонента или сделать это в родительском - когда обратный вызов тот же?
Итак, родитель такой:
...
render() {
<SomeChild onSomeAction = {this.onSomeAction} />
<OtherChild onSomeAction = {this.onSomeAction} />
}
...
И мне нужно передать один и тот же параметр с разными значениями от каждого из дочерних компонентов.
Итак - какой лучше?
1. Укажите разные значения для каждого из дочерних компонентов:
SomeChild:
...
<button onClick = {(e) => this.props.onSomeAction(e, true)}>Button</button>
...
OtherChild:
...
<button onClick = {(e) => this.props.onSomeAction(e, false)}>Button</button>
...
2. Укажите конкретное значение в родительском элементе:
Parent:
...
render() {
<SomeChild onSomeAction = {(e) => this.onSomeAction(e, true)} />
<OtherChild onSomeAction = {(e) => this.onSomeAction(e, false)} />
}
...
SomeChild:
...
<button onClick = {this.props.onSomeAction}>Button</button>
...
OtherChild:
...
<button onClick = {this.props.onSomeAction}>Button</button>
...
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Оба решения действительны. Ни один не лучше другого.
Единственное отличие связано с onSomeAction.
Если у родителя есть логика этого действия, то лучше отправить дочернему в качестве свойства. Поместите действие внутрь дочернего элемента, только если действие не то же самое. Предпочитаю повторно использовать код.
Насколько я понимаю из того, что вы описываете, действие распределяется между всеми дочерними элементами, поэтому я бы сказал, чтобы определить это внутри родителя и передать дочерним элементам как свойство.
Я бы поместил эту информацию как можно выше, в данном случае в родителя. Если вашему дочернему компоненту не нужно знать переданное ему логическое значение (или любые объекты), и если он не должен изменять их поведение или влиять на них каким-либо образом, кроме этой функции, они не должны знать об этой переменной. .
Я бы сделал еще один шаг и использовал каррированные функции для улучшения читабельности:
onSomeAction = value => ev => {/* */}
render() {
<SomeChild onSomeAction = {this.onSomeAction(true)} />
<OtherChild onSomeAction = {this.onSomeAction(false)} />
}
Как правило, компонент должен содержать только информацию, изменяющую его поведение, чтобы быть как можно более гибким и пригодным для повторного использования.
Используя это решение, вы можете позже отправить все, что хотите, из функции:
<SomeChild onSomeAction = {this.onSomeAction('hi')} />
Или ничего :
onSomeAction = ev => {/* */}
<SomeChild onSomeAction = {this.onSomeAction} />
А то, что вы хотите получить, все равно будет видеть только родитель, и не обязательно должно появляться у ребенка.