Rendering props.children, React ile

Question

Birisi, "props.children" e sahip olmak için, yanıt yönlendiricisinin çalışması için neden "div" a sahip olduğumu açıklayabilir.

Bu çalışır:

export default (props) => { 
     return (
      <div id="main-template"> 
       {props.children} 
      </div> 
     ); 
} 

Ancak bu değildir:

export default (props) => { 
     return (
       {props.children} 
     ); 
} 

dair bir açıklamanız çok takdir edilecektir. Eğer bir çocuk düğüm varsa

Answer 1

Eğer birden fazla düğüm varsa sadece örneğin props.children

const Component = (props) => { 
    return props.children; 
}; 

Example

dönebilirsiniz, {} bandajm props.children gerekmez

<p>1</p> 
<p>2</p> 
<p>3</p> 

ürününü kapatmalısınızbir kök elemana, bileşen sadece bir kök öğe döndürmesi gerekir, çünkü bu

return (
    <p>1</p> 
    <p>2</p> 
    <p>3</p> 
) 

Answer 2

JSX gibi birçok döndüremez JavaScript işlev çağrıları HTML görünümlü kodu dönüştürür. Geri dönen birden çok üst düzey bileşenler

return (
    <p>text</p> 
    <p>text</p> 
    <p>text</p> 
); 

geçerli değil

return (
    React.createElement('p', null, 'text'), 
    React.createElement('p', null, 'text'), 
    React.createElement('p', null, 'text') 
); 

haline dönüştürülmüş olur. Tek bir değer döndürmeniz gerektiğinden, çok sayıda üst düzey öğe bulunamaz. React ekibi bu kuyu nasıl ele alınacağını anlamaya çalışıyor, ancak şu anda bir çözüm yok.