İki JSX parçacığı veya değişkenleri veya dizesi ve bileşeni (Reactjs'de) nasıl birleştirilir?

Question

JSX'in çok yanıltıcı olabileceğini biliyorum çünkü dizgilere benziyor ve bu yüzden dizeleri gerçekten manipüle etmiyor olsak bile, sorudaki "ip" terimidir. İşte

(yanlış, elbette) bir kod örnektir:

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

Bir çizgi var ve ben belirli koşullar altında, önünde birkaç bölüm "bitiştirmek" istiyor. Doğru sözdizimi ne olurdu? Ben ... Bunların hiçbiri çalışmıyor gibi görünüyor ... parantez, parantez, artı imzalamak

sayesinde

Answer 1

Kullanım diziler denedim:

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

Veya kullanmak fragmanları:

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

Her iki durumda da, React için anahtarları sağlamanız gerekir. Dizi durumunda, anahtarı doğrudan öğeye ayarlarsınız. Parçalarla ilgili olarak, anahtar: öğe çiftleri sağlarsınız.

NOT: render yönteminden döndürürken , yalnızca tek bir element veya NULL dönebilirsiniz. Verilen örnekler bu örnekte geçersizdir. Doğalöğesini Tepki için, ben bu tekniği tercih

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

Eğer bu şekilde yapmak da olabilir

1. yanlısı: aksine
2. nolu anahtarların yapay olarak oluşturulmasına gerek kalmadığı dizi tekniğine göre: içeren bir öğenin ek yükünü gerektirir (ör.,'un altındaki )

Answer 3

: Böyle başka div olarak bir ana nesnesi kullanılarak tamam ise