Come concatenare due frammenti o variabili JSX o stringhe e componenti (in Reactjs)?

Question

So che JSX può essere molto fuorviante perché sembra una stringa e non lo è, quindi il termine "stringa" nella domanda, anche se non stiamo realmente manipolando le stringhe.

Ecco un esempio di codice (sbagliato, ovviamente):

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

Ho una linea, e voglio "concatenate" alcuni div di fronte ad essa, in determinate condizioni. Quale sarebbe la sintassi corretta? che ho provato parentesi, parentesi, segno più ... Nessuno di loro sembra funzionare ...

grazie

Answer 1

utilizzare le matrici:

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

o utilizzare frammenti:

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 entrambi i casi, è necessario fornire le chiavi per React. In caso di array, si imposta la chiave direttamente sull'elemento. Per quanto riguarda i frammenti, fornisci la chiave: coppie di elementi.

NOTA: Quando ritorno da render metodo, è possibile restituire solo elemento singolo o NULL. Gli esempi forniti non sono validi in questo caso.

Answer 2

Se stai bene con un oggetto principale ad esempio un altro div È anche possibile fare in questo modo:

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

Per Reagire nativo, io preferisco questa tecnica:

1. pro: in contrasto per la tecnica dell'array non è necessario creare artificialmente le chiavi
2. con: richiede il sovraccarico di un elemento contenente (ad esempio, Vista, sotto)

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