Как в React выполнить метод дочернего элемента?

Question

[Влад Токарев]

Допустим, есть родительский компонент App, внутри которого есть несколько RandomString и RefreshButton
При клике на RefreshButton мне из App необходимо послать команду в RandomString, чтобы каждый такой компонент выполнил свой внутренний метод RandomString.refresh()

export class App extends Component<{}> {
  constructor(props: {}) {/* ... */}

  protected refreshItems() {
    // Тут надо как-то вызвать метод refresh() у дочерних RandomString
  }

  render(): ReactNode {
    return (
      <div>
        <RandomString />
        <RandomString />
        <RandomString />
        <RefreshButton onClick={this.refreshItems}  />
      </div>
    );
  }
}

Answer 1

[Роман Александрович]

export class App extends Component<{}> {
    this.myRef = React.createRef();
  constructor(props: {}) {/* ... */}

  protected refreshItems() {
    // Тут надо как-то вызвать метод refresh() у дочерних RandomString
  if(this.myRef&&this.myRef.current&&this.myRef.current.refresh){
      this.myRef.current. refresh()
   }
  }

  render(): ReactNode {
    return (
      <div>
        <RandomString     this.myRef = React.createRef(); />
        <RefreshButton onClick={this.refreshItems}  />
      </div>
    );
  }
}

и для RandomString нужно https://reactjs.org/docs/forwarding-refs.html