react 兄弟组件如何调用对方的方法示例

假设我们有三个组件：Child1、Child2和Home。Child1和Child2是兄弟组件，他们需要通过Home这个父组件来进行通信。

Child1组件：

```jsx

import React from 'react';

class Child1 extends Reactponent {

constructor(props) {

super(props);

this.state = { text: 'Child1' };

}

onChange = () => {

this.setState({ text: 'Child1 onChange' });

}

componentDidMount() {

this.props.onRef && this.props.onRef(this); // 将Child1实例传递给父组件Home

}

render() {

return

}

}

```

Child2组件：

```jsx

import React from 'react';

class Child2 extends Reactponent {

constructor(props) {

super(props);

}

handleClick = () => {

if (this.props.onTrigger) { // 当父组件传递的onTrigger被触发时执行操作

this.props.onTrigger(); // 这里可以调用父组件传递给Child2的任何操作，包括调用Child1的方法

}

}

render() {

return

}

}

```

Home组件：作为父组件，它需要处理两个子组件之间的通信：

```jsx

import React from 'react';

import Child1 from './Child1'; // 假设Child1和Child2在同一目录下，因此路径相同。实际项目中可能需要根据实际情况调整路径。