コンポーネントをhtmlタグでラップする必要がありますか？

Question

コンポーネントが常にHTMLタグでラップされているようなパターンを見ました。

私はthe docsを検索して、必須かどうかを確認しましたが、トピックには何も見つかりませんでした。

上記が真実でない場合、最初のコード例でエラーが発生し、2番目のコード例でエラーが発生するのはなぜですか？

const App = (props) => { 
    return (
    <Header /> 
    {props.children} 
); 
}; 

const App = (props) => { 
    return (
    <div> 
     <Header /> 
     {props.children} 
    </div> 
); 
}; 

Answer 1

いや、あなたの特別divまたは他のhtml要素でレンダリングラップするために必須ではありません、あなたはルート要素としてコンポーネントを使用してレンダリングすることができます。ただし、複数のルート要素を持つことはできません。そのため、最初の例でエラーが発生しています。以下は、しかし、動作します：

render() { 
    <Header> 
    <h1>Hello World</h1> 
    <p>Lorem ipsum</p> 
    </Header> 
} 

あなたはまだおそらくあなたが1つの以上のルート要素を持つことができないようヘッダ・コンポーネント内でラッパーdivのいくつかの並べ替えを持っている必要があります最後に。

Reactチームがこれを検討していて、新しい調整者が複数のルート要素をサポートしていると読んだことがありましたが、それは終わりが終わっていません。

Answer 2

HTMLタグで具体的に囲む必要はありません。カスタムコンポーネントでそれらをラップすることができます。

コンポーネントは、あなたがこれを行うことができない理由である単一のノードを、返すことがあるので、あなたが取得しているエラーは、次のとおりです。

// WRONG 
const App = (props) => { 
    return (
    <Header /> 
    {props.children} 
); 
};