回答編集履歴
2
answer
CHANGED
|
@@ -13,12 +13,11 @@
|
|
|
13
13
|
import "./styles.css";
|
|
14
14
|
const tree = {
|
|
15
15
|
Q1: ["Q2", "Q6"],
|
|
16
|
-
Q2: ["Q3", "Q4", "Q5"],
|
|
16
|
+
Q2: ["Q3", "Q4", "Q5", "Q1"],
|
|
17
|
-
Q3: [],
|
|
17
|
+
Q3: ["Q2"],
|
|
18
|
-
Q4: [],
|
|
18
|
+
Q4: ["Q2"],
|
|
19
|
-
Q5: [],
|
|
19
|
+
Q5: ["Q2"],
|
|
20
|
-
Q6: []
|
|
20
|
+
Q6: ["Q1"]
|
|
21
|
-
|
|
22
21
|
};
|
|
23
22
|
function App() {
|
|
24
23
|
return (
|
|
@@ -76,31 +75,51 @@
|
|
|
76
75
|
)}
|
|
77
76
|
</Controls>
|
|
78
77
|
</div>
|
|
78
|
+
<br />
|
|
79
|
+
<Controls>
|
|
80
|
+
{({ Q1 }) => <button onClick={Q1}>Go back to Q1</button>}
|
|
81
|
+
</Controls>
|
|
79
82
|
</div>
|
|
80
83
|
</Step>
|
|
81
84
|
<Step name="Q3">
|
|
82
85
|
<div>
|
|
83
86
|
Q3
|
|
84
87
|
<br />
|
|
85
|
-
|
|
88
|
+
</div>
|
|
89
|
+
<br />
|
|
90
|
+
<Controls>
|
|
91
|
+
{({ Q2 }) => <button onClick={Q2}>Go back to Q2</button>}
|
|
92
|
+
</Controls>
|
|
86
93
|
</Step>
|
|
87
94
|
<Step name="Q4">
|
|
88
95
|
<div>
|
|
89
96
|
Q4
|
|
90
97
|
<br />
|
|
91
|
-
|
|
98
|
+
</div>
|
|
99
|
+
<br />
|
|
100
|
+
<Controls>
|
|
101
|
+
{({ Q2 }) => <button onClick={Q2}>Go back to Q2</button>}
|
|
102
|
+
</Controls>
|
|
92
103
|
</Step>
|
|
93
104
|
<Step name="Q5">
|
|
94
105
|
<div>
|
|
95
106
|
Q5
|
|
96
107
|
<br />
|
|
97
|
-
|
|
108
|
+
</div>
|
|
109
|
+
<br />
|
|
110
|
+
<Controls>
|
|
111
|
+
{({ Q2 }) => <button onClick={Q2}>Go back to Q2</button>}
|
|
112
|
+
</Controls>
|
|
98
113
|
</Step>
|
|
99
114
|
<Step name="Q6">
|
|
100
115
|
<div>
|
|
101
116
|
Q6
|
|
102
117
|
<br />
|
|
118
|
+
<br />
|
|
119
|
+
<Controls>
|
|
120
|
+
{({ Q1 }) => <button onClick={Q1}>Go back to Q1</button>}
|
|
121
|
+
</Controls>
|
|
103
|
-
|
|
122
|
+
</div>
|
|
104
123
|
</Step>
|
|
105
124
|
</Wizard>
|
|
106
125
|
</div>
|
1
answer
CHANGED
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
自分でゼロから実装するのではなくライブラリという形ですが、「decision tree react」で検索すると、[react-decision-tree-flow](https://github.com/rjerue/react-decision-tree-flow)
|
|
2
2
|
というのがありました。
|
|
3
3
|
|
|
4
|
-
下記は、https://codesandbox.io/s/ybz8i?file=/src/index.js
|
|
5
|
-
を
|
|
4
|
+
sandboxの例を図のフローに合うように改変した例です。
|
|
5
|
+
https://codesandbox.io/embed/decisiontree-forked-2dign8?fontsize=14&hidenavigation=1&theme=dark
|
|
6
|
+
|
|
6
7
|
index.js
|
|
7
8
|
```js
|
|
8
9
|
import React from "react";
|