react项目中如何让一个组件中的函数控制另一个组件

在 React 中，组件之间的通信可以通过 props 和回调函数实现。

如果想让一个组件中的函数控制另一个组件，可以将该函数作为 props 传递给另一个组件，在另一个组件中调用该函数即可。

例如，我们有两个组件 A 和 B，组件 A 中有一个函数 handleData，需要控制组件 B 的显示。

首先，在组件 A 中定义 handleData 函数，并将该函数作为 props 传递给组件 B：

class A extends React.Component {
  handleData = (data) => {
    // 处理数据逻辑
  }
  
  render() {
    return (
      <div>
        <B handleData={this.handleData} />
      </div>
    )
  }
}

然后，在组件 B 中通过 props 获取 handleData 函数，并在需要的时候调用该函数：

class B extends React.Component {
  handleClick = () => {
    const data = 'some data';
    this.props.handleData(data);
  }
  
  render() {
    return (
      <div>
        <button onClick={this.handleClick}>Click me</button>
      </div>
    )
  }
}

在组件 B 中点击按钮时，会调用 handleClick 函数，该函数会调用传递进来的 handleData 函数，并将数据传递给它，在 handleData 函数中可以处理数据逻辑，并控制组件 B 的显示。