Reactのテキストを複数の行に分割する

Question

配列内にさらに文字列を保存します。私がしたいのは、それぞれのアイコンを別々の行に置いたときにそれらを表示することです。

addMessages =() => { 
    const text = []; 

    //add strings in the array 

    return text.join("<hr/>"); 

} 

render() { 
    const showWhenHover = this.addMessages(); 

    return (
      <ActionBar popover={<div> {showWhenHover}</div>} 
       <div> 
        <Icon type="myIcon"/> 
       </div> 
      </ActionBar> 
     ); 
     } 
} 

私はアイコンの上に置くと、それは別の行にメッセージではなく、それらのそれぞれを示していますが、このような1行ですべて：

text1</hr>text2</hr>text3 

Isnと」私はこれまで試したどのような t <hr/>この場合、何を使用する必要がありますか？ありがとう

Answer 1

text.joinは、この場合は<hr />を含む1つの文字列をレンダリングします。代わりにJSXをレンダリングするためには、試してみてください。

addMessages =() => { 
    const text = []; 

    // add strings in the array 

    return text.map((item, index) => (
    <span key={index}> 
     {item} 
     {index && <hr />} 
    </span> 
)); 
} 

を唯一の欠点ここに余分なスパンですが、私はdangerouslySetInnerHTMLを使用しての上にこれを好むだろう。

Answer 2

あなたの関数addMessageは文字列を生成し、HTMLマークアップは生成しません。

テンプレートリテラルを使用する1つの解決策は、multiline stringsです。もう1つは、定義された寸法を持つ要素、またはテキストが次の行に移動するのに十分な大きさの要素内にテキストが含まれていることを確認することです。あなたはまた、独自の行の各文字列を取得するためにreturn text.map(e => <div>{e}</div>);を使用することができます

const genText =() => ` 
 
    Text with lots of 
 
    spaces within 
 
    it blah blah blah 
 
    blah 
 
` 
 

 
const Comp =() => <div style={{width: 100, height: 200}}>{genText()}</div> 
 

 
ReactDOM.render(<Comp />, document.getElementById('app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="app"></div>

Answer 3

。

function addMessages() { 
 
    const text = []; 
 
    
 
    text.push("1st line"); 
 
    text.push("2nd line"); 
 
    text.push("Third line"); 
 
    text.push("And a final one"); 
 

 
    return text.map(e => <div>{e}</div>); 
 
} 
 

 

 
const App =() => <div>{addMessages()}</div> 
 

 
ReactDOM.render(<App />, document.getElementById('app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="app"></div>