js クラス メソッド まとめて参照 react

Question

reactで親コンポーネントのクラスのメソッドをpropsとしてまとめて渡す方法はありますか？？

<Child parentMethod={this.allMethod}>.

のようなイメージです。

Answer 1

こんにちは。

質問で求められている問題解決になっているか分かりませんが、
例えばこういうことでしょうか？

import { Component } from "react";

class Parent extends Component {
  constructor(props) {
    super(props);

    this.handleClick = this.handleClick.bind(this);
    this.handleChange = this.handleChange.bind(this);
    this.handleFocus = this.handleFocus.bind(this);

    this.handlers = {
      onClick: this.handleClick,
      onChange: this.handleChange,
      onFocus: this.handleFocus,
    }
  }

  handleClick() {
    // ･･･
  }

  handleChange() {
    // ･･･
  }

  handleFocus() {
    // ･･･
  }

  render() {
    // ･･･
    return (
      <div>
        <Child parentHandlers={this.handlers} />
      </div>);
  }
}

上記では、 Parent のインスタンスにバインドした3つのハンドラを
this.handlers にまとめておいて、
<Child parentHandlers={this.handlers} />
として渡しています。

Child側では、 this.props.parentHandlers.onClick() のようにして使うことを
想定しています。

Parent のインスタンスにバインドしていないメソッドを Child　でも
使いたいとすれば、それは utils/ のようなディレクトリを作って、
そこに入れておき、どのコンポーネントからでも使えるユーティリティにすべき
ものなのではないかと思います。

以上は、想像で書いているだけなので、繰り返しになりますが、
質問で求められている問題解決になっているか分かりません。

より的確な回答をお望みであれば、<Child>を使う側のコンポーネントの
ソース全体を載せたほうがよいかもしれません。

以上参考になれば幸いです。