反应。如何在组件树中调用特定子对象的方法

Question

我开始学习React，想知道如何解决以下理论问题。

假设我有这样的组件。

class Game extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
        galaxyData:{}
    };
  }

  handleGalaxyCommand(cmd) {
    ...
  }

  render() {
    return (
      <Galaxy galaxyData={this.state.galaxyData} />
    );
  }
}

class Galaxy extends React.Component {
  render() {
    return (this.props.galaxyData.sectors.map((sector) =>
        <Sector sectorData={sector.sectorData} />
    )
    );
  }
}

class Sector extends React.Component {
  render() {
    return (this.props.sectorData.ships.map((ship) =>
        <Ship shipData={ship.shipData} />
    )
    );
  }
}

class Ship extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
        x: this.props.shipData.inialX,
        y: this.props.shipData.inialY,
    };
  }

  moveTo(x,y){
  ...
  }

  render() {
    return <div x={this.state.x} y={this.state.y} id={this.props.shipData.id}/>
  }
}

我仅为示例快速编写了代码，对于任何语法错误，我深表歉意。因此，组件树看起来像这样。

<Galaxy>
    <Sector>
        <Ship/> 
        ...
        <Ship/>
    </Sector>
    <Sector>
        <Ship/> 
        ...
        <Ship/>
    </Sector>
</Galaxy>

甚至可能有数千艘船。该船具有“ moveTo”方法，该方法启动Timer来更改状态下的x和y变量，从而导致重新渲染（移动效果）。假设Game组件通过“ handleGalaxyCommand”方法接收命令以使飞船开始移动。

如何在我感兴趣的船上调用“ moveTo”方法？

Answer 1

这实际上可以以非常简单的方式在react :)中实现。

但是这仅适用于基于类的组件（不适用于功能或挂钩）。

基本上，如果访问它的引用，则可以从父级调用任何子级的方法

类似：

class Parent extends Component {

    childRef = null;    

   componentDidMount() {
       //via ref you can call it
       this.childRef.myCustomMethod();
   }

    render() {
        return <Child ref={ref => this.childRef = ref} />
    }
}

class Child extends Component {

    myCustomMethod() {
        console.log("call me ");
    }

    render() {
        return <div />;
    }

}

检查文档的此部分以获取更多详细信息：https://reactjs.org/docs/refs-and-the-dom.html#adding-a-ref-to-a-class-component