时间戳

首页 > 解决方案 > ReactJS - 是从子组件提供参数更好，还是在父组件中提供参数 - 当回调相同时？

javascript - 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中指定具体值：

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

标签： javascriptreactjs

解决方案

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

我会更进一步，使用 curried 函数来提高可读性：

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

而你想收到的东西，反正只会被父母看到，不需要出现在孩子身上。

推荐阅读