React. Как вызвать метод специфицированного c дочернего элемента в дереве компонентов

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", который запускает таймер для изменения переменных x и y в состоянии, что вызывает повторный рендеринг, эффект перемещения. Предположим, что компонент Game получает команду через метод handleGalaxyCommand, чтобы заставить корабль начать движение.

Как вызвать метод moveTo на интересующем меня корабле?

Answer 1

Это на самом деле возможно в реакции :) очень простым способом.

Но это работает только в компонентах на основе классов (не функциональных или хуков).

По сути, вы можете вызвать любые дочерние методы от родителя, если вы обращаетесь к его ссылкам

Что-то вроде:

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-реф-к-а-класса-компоненты