javascript - グループコンポーネントがreactjsにマウントされた後に関数を実行する方法は?

Question

そのコンポーネント内の要素を処理している場合、コールバックcomponentDidMountは完全に機能しますが、コンポーネントのグループがマウントされた後、ページ上の複数のコンポーネントの要素を処理する関数を実行したいと考えています。私ができる最善の方法は何ですか？

Answer 1

props各componentDidMountメソッドが親コンポーネントを呼び出すことを使用して、コールバック関数を各コンポーネントに渡すことができます。これは、たとえば、そのコンポーネントの状態でカウンターを更新します。カウンターがレンダリングするコンポーネントの量に達したら、関数を実行します。

親コンポーネント:

....

shouldComponentUpdate(nextProps, nextState) {
  return nextState.childCount >= 4;
}

incrementChildCount() {
  this.setState({ childCount: this.state.childCount + 1 });
}

render() {
   return(
     <div id="container">
        <Child callme={this.incrementChildCount} />
        <Child callme={this.incrementChildCount} />
        <Child callme={this.incrementChildCount} />
        <Child callme={this.incrementChildCount} />
   );
}

子コンポーネント:

componentDidMount() {
   this.props.callme()
}