javascript - 函数是否作为 props 在此代码中传递？

Question

我是 React 的新手，遇到了这段 React 代码:

class Dashboard extends React.Component {
  state = { username: '' };

  render() {
    return (
      <div>
        <WelcomeMessage username={this.state.username} />
        <SettingsForm
          username={this.state.username}
          updateUsername={newUsername => {
            this.setState({ username: newUsername });
          }}
        />
      </div>
    );
  }
}

问题是这段代码是关于什么的:

updateUsername={newUsername => {
            this.setState({ username: newUsername });
          }}

函数是否作为 props 传递？？？

Answer 1

是的，一个函数在 Dashboard 组件中作为 props 传递。

通过:

updateUsername={newUsername => {
  this.setState({ username: newUsername });
}}

子组件可以调用 updateUsername(_myNewUserName_)，这将在其父组件中设置状态。

看看event bubbling可能会有所帮助看看这个概念的实际应用。

希望对你有帮助，