Reactにて表示・非表示を切り替えながら分岐質問を実装したい

①前提・実現したいこと
心理テストで、質問に答えていくだけで自分のタイプがわかるように、回答によって分岐する質問を実装したいです。
例えば以下の図のようなイメージです。

a)まずは「Q1」「選択肢A」「選択肢B」が表示される

b-1)選択肢Aを選んだ場合、Q1は消え、代わりに「Q2」「選択肢C」「選択肢D」「選択肢E」が表示される
b-2)選択肢Bを選んだ場合、Q1は消え、代わりに「Q6」が表示される

c-1)b-1にて選択肢Cを選んだ場合、Q2は消え、代わりに「Q3」が表示される
c-2)b-1にて選択肢Dを選んだ場合、Q2は消え、代わりに「Q4」が表示される
c-3)b-1にて選択肢Eを選んだ場合、Q2は消え、代わりに「Q5」が表示される

②発生している問題・エラーメッセージ
③該当のソースコード
④自分で調べたことや試したこと
配列としてQ1、Q2、、、単位で格納しておき、stateを更新することで表示するQを変更するなど考えておりましたが、なかなか実装ができません。
jQueryで書かれたサイトは以下のものを見つけ参考にしておりましたが、諸事情により使えるライブラリはReact.jsのみとなります。
http://creatornote.nakweb.com/%E9%81%B8%E6%8A%9E%E3%81%95%E3%81%9B%E3%81%A6%E7%B5%90%E6%9E%9C%E7%9A%84%E3%81%AB%E7%AD%94%E3%81%88%E3%81%8C%E5%87%BA%E3%82%8B%E3%80%8E%E5%BF%83%E7%90%86%E3%83%86%E3%82%B9%E3%83%88%E3%80%8F%E5%9E%8Bjs/
掲載できるような作成コードもなく大変心苦しいのですが、コードを教えていただきたいです。

⑤使っているツールのバージョンなど補足情報
create-react-app で作ったプロジェクトでreactはバージョン17を使用しています。

以上、お知恵を拝借できると大変助かります、どうぞよろしくお願いいたします。

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

回答1件

ベストアンサー

自分でゼロから実装するのではなくライブラリという形ですが、「decision tree react」で検索すると、react-decision-tree-flow
というのがありました。

sandboxの例を図のフローに合うように改変した例です。
https://codesandbox.io/embed/decisiontree-forked-2dign8?fontsize=14&hidenavigation=1&theme=dark

index.js

js
1import React from "react";
2import ReactDOM from "react-dom";
3import { Wizard, Step, Controls } from "react-decision-tree-flow";
4
5import "./styles.css";
6const tree = {
7  Q1: ["Q2", "Q6"],
8  Q2: ["Q3", "Q4", "Q5", "Q1"],
9  Q3: ["Q2"],
10  Q4: ["Q2"],
11  Q5: ["Q2"],
12  Q6: ["Q1"]
13};
14function App() {
15  return (
16    <div className="App">
17      <h2>Start</h2>
18
19      <Wizard tree={tree} first="Q1">
20        <Step name="Q1">
21          <div>
22            Q1
23            <br />
24            <div className="btnSection">
25              <Controls>
26                {({ Q2 }) => (
27                  <div onClick={Q2} className="btn">
28                    A
29                  </div>
30                )}
31              </Controls>
32              <Controls>
33                {({ Q6 }) => (
34                  <div onClick={Q6} className="btn">
35                    B
36                  </div>
37                )}
38              </Controls>
39            </div>
40          </div>
41        </Step>
42
43        <Step name="Q2">
44          <div>
45            Q2.
46            <br />
47            <div className="btnSection">
48              <Controls>
49                {({ Q3 }) => (
50                  <div onClick={Q3} className="btn">
51                    C
52                  </div>
53                )}
54              </Controls>
55              <Controls>
56                {({ Q4 }) => (
57                  <div onClick={Q4} className="btn">
58                    D
59                  </div>
60                )}
61              </Controls>
62              <Controls>
63                {({ Q5 }) => (
64                  <div onClick={Q5} className="btn">
65                    E
66                  </div>
67                )}
68              </Controls>
69            </div>
70            <br />
71            <Controls>
72              {({ Q1 }) => <button onClick={Q1}>Go back to Q1</button>}
73            </Controls>
74          </div>
75        </Step>
76        <Step name="Q3">
77          <div>
78            Q3
79            <br />
80          </div>
81          <br />
82          <Controls>
83            {({ Q2 }) => <button onClick={Q2}>Go back to Q2</button>}
84          </Controls>
85        </Step>
86        <Step name="Q4">
87          <div>
88            Q4
89            <br />
90          </div>
91          <br />
92          <Controls>
93            {({ Q2 }) => <button onClick={Q2}>Go back to Q2</button>}
94          </Controls>
95        </Step>
96        <Step name="Q5">
97          <div>
98            Q5
99            <br />
100          </div>
101          <br />
102          <Controls>
103            {({ Q2 }) => <button onClick={Q2}>Go back to Q2</button>}
104          </Controls>
105        </Step>
106        <Step name="Q6">
107          <div>
108            Q6
109            <br />
110            <br />
111            <Controls>
112              {({ Q1 }) => <button onClick={Q1}>Go back to Q1</button>}
113            </Controls>
114          </div>
115        </Step>
116      </Wizard>
117    </div>
118  );
119}
120
121const rootElement = document.getElementById("root");
122ReactDOM.render(<App />, rootElement);

style.css

css
1.btnSection {
2  display: flex;
3  padding: 0.5rem 0;
4}
5
6.btnSection > div {
7  margin-right: 1rem;
8}
9
10.btn {
11  display: flex;
12  justify-content: center;
13  align-items: center;
14  padding: 0.5rem 1rem;
15  border-radius: 5px;
16  border: 2px solid green;
17  text-transform: uppercase;
18}

投稿2022/04/10 10:15

編集2022/04/10 13:59

退会済みユーザー

総合スコア0

katsugl

2022/04/11 14:43

回答ありがとうございました！ライブラリから引用いただいている部分もありますが、そちらも含めてreact初学者の私には勉強になる回答でした。ゆっくりコードを噛み砕きながら理解させていただきます。ありがとうございました！

katsugl

2022/04/11 15:32

度々失礼します。追加となり大変恐縮ですが教えてください。上記コードを使って実装しようとしているのですが、react-decision-tree-flowのライブラリをローカル開発環境にインストールする方法がわかりません。普段Visual Studio Codeを利用しており、ターミナルから「npm install --」のようにgithub上の何かしらリンクからインストールすることでライブラリを使えるという認識ですが、ターミナルにはどのようなコマンド入力をすれば良いのでしょうか、、、？（無理矢理コードファイルをダウンロードしてみましたが正常に動作しませんでした）お手数お掛けしますがご検討をお願いいたします。

退会済みユーザー

2022/04/11 22:38

npm i react-decision-tree-flow でインストールできないでしょうか

katsugl

2022/04/12 14:51

ありがとうございます！インストールができました。また、動作しなかったのはインストールしたバージョンが影響しておりました、お騒がせしました。丁寧にご回答いただきありがとうございます。

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