Оказание реквизита. Ребенок

Question

Не могли бы вы объяснить, почему у меня должно быть «props.children», завернутое в «div» для работы маршрутизатора.

Это работает:

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

Однако это не делает:

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

Любое объяснение будет высоко ценится.

Answer 1

Если у вас есть один дочерний узел вам не нужно обернуть props.children в {}, вы можете просто вернуть props.children

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

Example

, если у вас есть более одного узла, например

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

вы must обертывание children на один корневой элемент, потому что компонент должен возвращать только один корневой элемент, вы не можете вернуться несколько, как этот

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

Answer 2

JSX преобразует HTML-код ищет в яваскрипте вызовов функций. Повторные несколько компонентов верхнего уровня

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

преобразуется в

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

, который не является действительным. Поскольку вам нужно вернуть одно значение, вы не можете отображать несколько элементов верхнего уровня. Команда React пытается понять, как справиться с этим, но в настоящее время решения нет.