質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

1回答

262閲覧

Typescript: 文章の句点を<br/>で置き換えたい

jesuissuyaa

総合スコア18

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2019/09/08 19:27

やりたいこと: propsで文章を受け取る→「。」を<br />で置き換えたい
困っていること: template stringを使った書き方がわからない; テンプレートストリングがJSXElementをどう扱っているのかわからない
試したこと: 調べたコードを試した; ``や{}で囲むなど

現状のコード

typescript:

1<p> 2{props.desc.split('。').map(s => ( 3{s} <br/> 4)} 5</p>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

こんにちは

<React.Fragment> を使って、以下でいけるかと思います。

jsx

1 <p> 2 {props.desc.split('。').map((line, i) => 3 <React.Fragment key={i}>{line}<br /></React.Fragment>) 4 } 5 </p>

以上、参考になれば幸いです。

備考

<React.Fragment> には <> という短い記法がありますが、<> の場合、 配列要素になるコンポーネントに渡さなければならない、 key prop を使えないので、上記のように、省略しないで <React.Fragment> と書きます。

投稿2019/09/08 22:35

編集2019/09/08 22:52
jun68ykt

総合スコア9058

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

olee46

2019/09/08 22:45

React.Fragmentの存在を忘れていました!ありがとうございます
jun68ykt

2019/09/08 22:51

どういたしまして。解決したようで、よかったです????
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問