reactで別々にrenderしているコンポーネント同士でデータを共有する方法

表題の件、reactは~~v16.2~~ v16.14.0を使っています。

1つのページで複数のコンポーネントをレンダーしています。

コードのイメージとしては以下です。

FormComponentでサーバーにデータを送信した後、その結果をMessageComponentを使って出力したいと考えています。

サーバーへデータを送信する処理はFormComponentのhandleSubmitで行い、MessageComponentに表示するメッセージを取得する予定です。

両方のコンポーネントが親子関係であればpropsの受け渡し等で可能と思いますが、renderが分かれているので方法がよくわかりません。
reactのclassコンポーネントではなく、関数コンポーネントで解決可能な方法わかりますと助かります。
よろしくお願いいたしますm(_ _)m

javascript
1import React from "react";
2import { render } from "react-dom";
3
4const MessageComponent = () => {
5    return <div>FormComponentで取得した結果文字列があればここに表示。なければ非表示</div>;
6};
7
8const FormComponent = () => {
9    const handleSubmit = e => {
10        // ここでサーバーにデータを送り、結果文字列を取得
11    };
12    return (
13        <form onSubmit={handleSubmit}>
14            <input name="name"/>
15            <button>送信</button>
16        </form>
17    );
18};
19render(<MessageComponent />, document.getElementById("message"));
20render(<FormComponent />, document.getElementById("form"));

hoshi-takanori

2021/08/25 06:40

React のバージョンは本当に 16.2 ですか？ (確か hooks が導入されたのが 16.8 なので、16.2 だとクラスコンポーネントじゃないと無理では…。)

dev39

2021/08/25 06:47

すみません、調べたらご指定の通り間違っていました。バージョンは16.14.0でした

行動規範の内容に同意します

回答1件

ベストアンサー

両方を束ねる上位コンポーネントを作る、あるいは1つのコンポーネントにまとめるのが、いちばん素直なやり方です。Portalを使えば、Reactコンポーネントの一部をバラバラな場所に出すことも可能です（React公式）。

jsx
1const FormComponent = () => {
2    const handleSubmit = e => {
3        // ここでサーバーにデータを送り、結果文字列を取得
4    };
5    return (
6        <>
7          <form onSubmit={handleSubmit}>
8            <input name="name"/>
9              <button>送信</button>
10          </form>
11          { createPortal(<div>結果</div>, document.getElementById("message")) }
12        </>
13    );
14};