如何在React中通过子组件onClick事件切换父组件activity属性

嘿，这个问题其实是React里很常见的父子组件状态同步场景，咱们一步步来实现你要的效果：

1. 给App组件添加状态管理当前的activity函数 #

首先得让App组件自己“记住”当前要传给子组件的是哪个函数，所以我们需要给它加个状态。修改后的App代码如下：

class App extends Component {
  constructor(props){
    super(props);
    // 初始化状态，默认用func1
    this.state = {
      currentActivity: this.func1
    };
  }

  func1 = () => { /* 你的func1逻辑 */ }
  func2 = () => { /* 你的func2逻辑 */ }

  // 定义一个切换函数，用来把状态改成func2
  switchActivity = () => {
    this.setState({
      currentActivity: this.func2
    });
  }

  render() {
    return (
      <div>
        {/* 把当前状态里的函数传给子组件，同时把切换函数也传过去 */}
        <Component 
          activity={this.state.currentActivity} 
          onTriggerSwitch={this.switchActivity} 
        />
      </div>
    );
  }
}

2. 在子Component里绑定onClick事件触发切换 #

子组件需要接收父组件传过来的onTriggerSwitch回调，然后在你想要触发切换的元素（比如按钮）上绑定onClick事件，调用这个回调就行。下面分别给出类组件和函数组件的示例：

子组件是类组件的情况： #

class Component extends Component {
  render() {
    return (
      {/* 这里用按钮举例，点击它就会触发父组件的切换逻辑 */}
      <button onClick={this.props.onTriggerSwitch}>
        切换到func2
      </button>
    );
  }
}

子组件是函数组件的情况： #

const Component = (props) => {
  return (
    <button onClick={props.onTriggerSwitch}>
      切换到func2
    </button>
  );
}

为什么这样能行？ #

• App组件的状态currentActivity决定了传给子组件的activity属性是什么，初始是func1。
• 当子组件的按钮被点击时，会调用父组件传过来的switchActivity函数，这个函数会更新App的状态为func2。
• React检测到状态变化后，会重新渲染App组件，这时候传给子组件的activity就变成func2了，完全符合你的需求~

内容的提问来源于stack exchange，提问作者KT-mongo