回答編集履歴
3
テキスト修正
test
CHANGED
|
@@ -34,4 +34,4 @@
|
|
|
34
34
|
|
|
35
35
|
|
|
36
36
|
|
|
37
|
-
<React.Fragment> には [<> という短い記法](https://ja.reactjs.org/docs/fragments.html#short-syntax)がありますが、
|
|
37
|
+
<React.Fragment> には [<> という短い記法](https://ja.reactjs.org/docs/fragments.html#short-syntax)がありますが、`<>` の場合、 配列要素になるコンポーネントに渡さなければならない、 `key` prop を使えないので、上記のように、省略しないで <React.Fragment> と書きます。
|
2
テキスト修正
test
CHANGED
|
@@ -25,3 +25,13 @@
|
|
|
25
25
|
|
|
26
26
|
|
|
27
27
|
以上、参考になれば幸いです。
|
|
28
|
+
|
|
29
|
+
|
|
30
|
+
|
|
31
|
+
|
|
32
|
+
|
|
33
|
+
### 備考
|
|
34
|
+
|
|
35
|
+
|
|
36
|
+
|
|
37
|
+
<React.Fragment> には [<> という短い記法](https://ja.reactjs.org/docs/fragments.html#short-syntax)がありますが、省略形の場合、 配列要素になるコンポーネントに渡さなければならない、 `key` prop を使えないので、上記のように、省略しないで <React.Fragment> と書きます。
|
1
テキスト修正
test
CHANGED
|
@@ -2,21 +2,21 @@
|
|
|
2
2
|
|
|
3
3
|
|
|
4
4
|
|
|
5
|
-
以下でいけるかと思います。
|
|
5
|
+
[<React.Fragment>](https://ja.reactjs.org/docs/fragments.html) を使って、以下でいけるかと思います。
|
|
6
6
|
|
|
7
7
|
```jsx
|
|
8
8
|
|
|
9
9
|
<p>
|
|
10
10
|
|
|
11
|
-
{props.desc.split('。').map(line =>
|
|
11
|
+
{props.desc.split('。').map((line, i) =>
|
|
12
|
+
|
|
13
|
+
<React.Fragment key={i}>{line}<br /></React.Fragment>)
|
|
14
|
+
|
|
15
|
+
}
|
|
12
16
|
|
|
13
17
|
</p>
|
|
14
18
|
|
|
15
19
|
```
|
|
16
|
-
|
|
17
|
-
上記で、`<>` は [<React.Fragment>](https://ja.reactjs.org/docs/fragments.html) の省略形です。
|
|
18
|
-
|
|
19
|
-
|
|
20
20
|
|
|
21
21
|
- **動作確認用CodePen:** [https://codepen.io/jun68ykt/pen/mdbXLmq](https://codepen.io/jun68ykt/pen/mdbXLmq)
|
|
22
22
|
|