このコードを返そうとすると：
return <hr/><h1>E esse é um Class Component</h1>
エラーが発生しますが、次のように変更すると次のようになります。
return <h1><hr/>E esse é um Class Component</h1>
できます。エラーでは、隣接するJSX要素を囲んでいるタグでラップする必要があると表示されます。JSXフラグメントが必要でしたが、完全には取得できませんでした。誰か説明してもらえますか？私はReactを学び始めているので、ちょっと初心者です。
Reactは、返された要素が有効であるかどうかを子のスコープで認識している必要があります。また、React差分アルゴリズムをチェックインする必要があります。そのため、要素を返すには反応スコープが必要です。
「return（{item：1}）;」のようなものです。Javascript関数の場合は戻り値。したがって、Reactは、最上位の有効な子を送信することを望んでいます。
しかし、あなたは「return（{item：1}、{item：2}）;」のようなものをReactに送りたいと思っていました。
ご覧のように;
<div>
<ReturnElement />
</div>
div要素はReturn要素のスコープです。DOMツリーの明確なスコープを返したい場合は、ReactFragments機能を使用できます。
<>
<ReturnChildElement />
</>
または
<React.Fragment>
<ReturnChildElement />
</React.Fragment>
注：最初の構文を使用する場合、JSX構文で使用するには、babelバージョンの最小値が「v7.0.0-beta.31」である必要があります。
また、Reactの公式ドキュメントでフラグメントを確認することもできます。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加