reactjs - HOC/Render-Call Back またはライブラリ関数?

Question

私は、見込み客が興味を持っているプロパティに関する電子メールを送信する必要があるプロジェクトに取り組んでいます。データベースからプロパティ情報と見込み客の連絡先情報を取得し、その子に渡す最上位コンポーネントがあります。情報をフォーマットする同じプロセスを共有し、電子メールを送信する電子メール関数を呼び出す 2 つのコンポーネントがあります。1 つのコンポーネントのサンプルは次のようになります。

import sendEmail from 'actions/sendEmail'

class PropertyDetail extends React.Componet {
  state = {
    unit: undefined,
    prospect: undefined,
  };

  componentDidMount = () => {
    this.setState({
      unit: this.props.unit,
      prospect: this.props.prospect,
    });
  };

  sendEmail = ({ id, address, prospect }) => {
    // quite a bit more gets formatted and packaged up into this payload
    const payload = {
      id,
      address,
      prospectEmail: prospect.email,
    };

    emailFunction(payload);
  };

  handleEmail = () => {
    sendEmail(this.state);
  };

  render() {
    return (
      <div>
        <h1>{this.state.unit.address}</h1>
        <p>Send prospect an email about this property</p>
        <button onClick={this.handleEmail}>Send Email</button>
      </div>
    );
  }
}

他のコンポーネントは次のようになります

class UpdateShowing extends React.Component {
  state = {
    unit: undefined,
    prospect: undefined,
    showingTime: undefined,
  };

  componentDidMount = () => {
    this.setState({
      unit: this.props.unit,
      propsect: this.props.prospect,
      showingTime: this.props.showingTime,
    });
  };

  sendEmail = ({ id, address, prospectEmail }) => {
    // quite a bit more gets formatted and packaged up into this payload
    const payload = {
      id,
      address,
      prospectEmail,
    };

    emailFunction(payload);
  };

  handleUpdate = newTime => {
    // get the new date for the showing ...
    this.setState({
      showingTime: newTime,
    });

    // call a function to update the new showing in the DB
    updateShowingInDB(newTime);
    sendEmail(this.state);
  };

  render() {
    return (
      <div>
        <p>Modify the showing time</p>
        <DatePickerComponent />
        <button onClick={this.handleUpdate}>Update Showing</button>
      </div>
    );
  }
}

そのため、各コンポーネントで繰り返す必要がないようにしたい共有機能がいくつかあります。私はまだ学んでいます (私の最初の仕事に取り組んでいます)、そしてこれを自分のスキルを伸ばす機会として利用してみませんか? だから私は HOC/Render props パターンを上手に使いたいと思っていますが、これが 1 つを使用する場所かどうかはわかりません。

render prop を使用してコンポーネントを作成する必要がありますか (HOC の代わりにこのパターンを使用したいのですが)? それがどのように見えるかさえわかりません。ブログを読んだり、講演を見たりしましたが、ああ

<MouseMove render={(x, y) => <SomeComponent x={x} y={y} />} />

しかし、このパターンは私のケースに適用できますか?それとも、電子メールのペイロードのフォーマットを処理する lib 関数を定義し、その関数を必要とするさまざまなコンポーネントにインポートする方がよいでしょうか?

ありがとう！