javascript - ReactJS - 是从子组件提供参数更好，还是在父组件中提供参数更好 - 当回调相同时？

Question

所以，父级是这样的:

...
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。在父级中指定具体值:

父级:

...
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>
...

Answer 1

我会将此信息放在尽可能高的位置，在本例中是在父级中。如果您的子组件不需要知道传递给它们的 bool 值(或任何对象)，并且如果它不应该改变它们的行为或以除此函数之外的任何方式影响它们，那么它们不应该不知道这个变量.

我会更进一步，使用柯里化(Currying)函数来提高可读性:

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} />

而你想要接收的东西无论如何也只会被父进程看到，而不需要出现在子进程中。