在此代碼中是否將函數作為道具傳遞？

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 });
          }}

是作為道具傳遞的函數嗎？？？

Answer 1

是的，函數在Dashboard組件中作為道具傳遞。

通過傳遞：

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

子組件可以調用updateUsername(_myNewUserName_) ，這將在其父組件中設置狀態。

看看事件冒泡 ，看看這個概念在實踐中可能是有益的。

希望這可以幫助，