2つのJSXフラグメント、または文字列とコンポーネント（Reactjs内）を連結するにはどうすればよいですか？

Question

私はJSXが文字列のように見えることがあり、実際には文字列を操作していなくても質問の中の "文字列"という言葉は誤解を招く可能性があることを知っています。ここで

は（当然、間違った）コードの例です：

let line = <Line key={line.client_id} line={line}/>; 
if(line.created_at) { 
    return <div className="date-line"><strong>{line.created_at}</strong></div> + line; 
} else { 
    return chat_line; 
} 

私はラインを持っている、と私は特定の条件下でその前にいくつかのdivを「連結」したいと思います。適切な構文は何でしょうか？ 私は...

おかげ

Answer 1

使用アレイかっこ、かっこ、プラス記号...それらのどれもが動作するようには思えませんが試してみた：

let lineComponent = <Line key={line.client_id} line={line}/>; 
if (line.created_at) { 
    return [ 
    <div key="date" className="date-line"><strong>{line.created_at}</strong></div>, 
    lineComponent, 
    ]; 
} else { 
    return chat_line; 
} 

またはフラグメントを使用します。

import createFragment from "react-addons-create-fragment"; 

let lineComponent = <Line key={line.client_id} line={line}/>; 
if (line.created_at) { 
    return createFragment({ 
    date: <div className="date-line"><strong>{line.created_at}</strong></div>, 
    lineComponent: lineComponent, 
    }); 
} else { 
    return chat_line; 
} 

を

どちらの場合でも、には、Reactのキーを指定する必要があります。配列の場合、要素に直接キーを設定します。フラグメントに関しては、key：要素のペアを指定します。

注： renderメソッドから戻ると、単一の要素、つまりNULLのみを返すことができます。この場合、提供される例は無効です。ネイティブに反応するために、私はこの手法を好む

let line = <Line key={line.client_id} line={line}/>; 
if(line.created_at) { 
    return <div><div className="date-line"><strong>{line.created_at}</strong></div>{line}</div>; 
} else { 
    return chat_line; 
} 

Answer 2

あなたは、このようにそれを行うこともできます

1. プロ：対照的に、配列のテクニックに人工的にキーを作成する必要はありません。
2. con：包含する要素のオーバーヘッドが必要です（例：、）

jsx = <Text>first</Text>; 
jsx = <View>{jsx}<Text>second</Text></View>; 

Answer 3

：あなたは、このような別のdivとして親オブジェクトを使用して大丈夫であれば