Wie verkette ich zwei JSX-Fragment oder Variablen oder Zeichenfolge und Komponente (in Reactjs)?

Question

Ich weiß JSX kann sehr irreführend sein, weil es wie Strings aussieht und es nicht ist, also der "String" -Begriff in der Frage, auch wenn wir nicht wirklich Strings manipulieren.

Hier ist ein Codebeispiel (falsch, natürlich):

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; 
} 

ich eine Linie haben, und ich will „verketten“ einige divs vor ihm unter bestimmten Bedingungen. Was wäre die richtige Syntax? Ich habe versucht, Klammern, Klammern, Plus-Zeichen ... Keiner von ihnen zu funktionieren scheint ...

dank

Answer 1

Verwenden Arrays:

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; 
} 

Oder verwenden Fragmente:

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; 
} 

In beiden Fällen müssen Sie Schlüssel für React bereitstellen. Im Falle eines Arrays setzen Sie den Schlüssel direkt auf das Element. Bei Fragmenten stellen Sie Schlüssel: Element-Paare zur Verfügung.

HINWEIS: Wenn aus render Methode zurückkehren, können Sie nur einzelnes Element zurück oder NULL. Die angegebenen Beispiele sind in diesem Fall ungültig.

Answer 2

Wenn Sie in Ordnung mit einem übergeordneten Objekt wie einem anderen div sind, können Sie es auf diese Weise auch tun:

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 3

für Native Reaktion, ziehe ich diese Technik:

1. pro: im Gegensatz auf die Array-Technik haben Sie nicht künstlich Schlüssel
2. con erstellen: erfordert den Aufwand eines enthaltenden Elements (zB Ansicht, unter)

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