如何将依赖兄弟组件属性的事件处理程序交由其处理？

你现在遇到的情况是：LeftControl组件触发的onTouchMove事件，你希望交给它的兄弟组件Brains来处理，而且这个事件处理函数onLeftMove需要用到Brains内部的属性（比如构造函数里定义的this.randomNumber = 555），当前的渲染代码是这样的：

render() { 
  return (
    <div> 
      <LeftControl onTouchMove={this.onLeftMove} /> 
      <Brains /* 希望处理onLeftMove，因为需要访问内部诸多属性 */ /> 
    </div>
  )
} 

下面给你几个实用的解决方案，你可以根据项目场景选择：

方案一：把状态和逻辑提到父组件（最推荐） #

既然两个组件是兄弟关系，父组件作为它们的共同容器，我们可以把原本放在Brains里的属性和事件处理逻辑移到父组件中，这样既可以让onLeftMove访问到需要的属性，又能把方法传给LeftControl，同时把属性回传给Brains让它继续使用。

示例代码：

class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    // 把原本Brains里的属性移到父组件
    this.randomNumber = 555;
    this.onLeftMove = this.onLeftMove.bind(this);
  }

  onLeftMove(event) {
    // 这里可以直接访问this.randomNumber，编写处理逻辑
    console.log('处理左移事件，用到的随机数：', this.randomNumber);
    // 如果需要让Brains执行后续操作，还可以通过ref调用它的方法
    this.brainsRef.doSomething();
  }

  render() {
    return (
      <div>
        <LeftControl onTouchMove={this.onLeftMove} />
        <Brains 
          ref={(ref) => { this.brainsRef = ref; }} 
          randomNumber={this.randomNumber} 
        />
      </div>
    );
  }
}

这种方式完全符合React的单向数据流理念，状态管理更清晰，兄弟组件之间不需要直接通信，通过父组件中转即可，后期维护起来也更方便。

方案二：使用React Context（适合复杂跨层级场景） #

如果你的组件层级比较深，或者有多个组件需要共享Brains里的属性和方法，可以用React Context来实现跨组件通信，不用再通过父组件层层传递props。

步骤如下：

1. 先创建一个Context：

const BrainsContext = React.createContext();

2. 修改Brains组件，把需要共享的方法和属性放到Context的Provider里：

class Brains extends React.Component {
  constructor(props) {
    super(props);
    this.randomNumber = 555;
    this.onLeftMove = this.onLeftMove.bind(this);
  }

  onLeftMove(event) {
    // 这里可以直接访问内部的randomNumber
    console.log('处理左移事件，用到的随机数：', this.randomNumber);
    // 你的业务逻辑
  }

  render() {
    return (
      <BrainsContext.Provider value={{ onLeftMove: this.onLeftMove }}>
        {/* Brains的内部UI内容 */}
      </BrainsContext.Provider>
    );
  }
}

3. 修改LeftControl组件，从Context中获取onLeftMove方法：

class LeftControl extends React.Component {
  static contextType = BrainsContext;

  render() {
    return (
      <div onTouchMove={this.context.onLeftMove}>
        {/* LeftControl的内部UI内容 */}
      </div>
    );
  }
}

这种方式适合组件跨层级共享数据的场景，但要注意不要过度使用，否则会让组件之间的耦合度变高，不利于后期维护。

方案三：使用Ref直接调用兄弟组件方法（不推荐，仅特殊场景使用） #

你也可以给Brains组件添加ref，然后在父组件的事件处理函数里直接调用Brains实例的方法，这样就能访问到它的内部属性了。不过这种方式违背了React的单向数据流原则，会让组件耦合度变高，所以除非万不得已，不建议使用。

示例代码：
父组件：

class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.onLeftMove = this.onLeftMove.bind(this);
  }

  onLeftMove(event) {
    // 直接调用Brains实例的处理方法
    this.brainsRef.handleLeftMove(event);
  }

  render() {
    return (
      <div>
        <LeftControl onTouchMove={this.onLeftMove} />
        <Brains ref={(ref) => { this.brainsRef = ref; }} />
      </div>
    );
  }
}

Brains组件：

class Brains extends React.Component {
  constructor(props) {
    super(props);
    this.randomNumber = 555;
    this.handleLeftMove = this.handleLeftMove.bind(this);
  }

  handleLeftMove(event) {
    // 这里可以直接访问内部的randomNumber
    console.log('处理左移事件，随机数：', this.randomNumber);
    // 你的业务逻辑
  }

  render() {
    return <div>{/* Brains的内部UI内容 */}</div>;
  }
}

总结一下：优先选择方案一，符合React的设计理念；如果是复杂的跨层级场景，可以考虑方案二；方案三尽量避免使用。

内容的提问来源于stack exchange，提问作者J. Reku