return（）内でブロックを使用できないReact JSX

Question

私はReact JSを学び、JSXの問題に直面しています。 私はコンポーネントを持っている：

class Content extends React.Component { 
    render() { 
    const array = ["apple", "orange"] 
    return (
     {array[0]} 
    ) 
    } 
} 

それはエラーbabel.min.js:7 Uncaught SyntaxError: Inline Babel script: Unexpected token, expected ,

をスローしかし、私は<span>タグ内{array[0]}を巻いた場合、これは動作します。

class Content extends React.Component { 
    render() { 
    const array = ["apple", "orange"] 
    return (
     <span>{array[0]}</span> 
    ) 
    } 
} 

私の主なJavaScriptは良くないと思いますが、この問題を理解するのを助けてください。ありがとうございました。

Answer 1

反応コンポーネントのレンダリングでは、HTMLコンテナタグ（例：DIV）にラップされた有効なHTMLを返す必要があります。私は反応がどのように働くかを二重に確認するべきだと思う。

そうになるのようにレンダリング方法だけ render a single root、あなたがする必要があるすべては、それが有効なHTMLタグをinisdeラップすることですできますので、私は信じてい

render() { 
    return <div> 
    </div> 
} 

Answer 2

：

render() { 
    return (<div> {/* any valid js element */}</div>); 
} 

Answer 3

問題は、最初にありますあなたが有効な要素を返さない例です。

コンポーネントがrenderメソッドで何かを返す場合、返されるのはReact.createElementによって作成されたHTML要素です。

Hereあなたはどのようなバーベルを見ることができます。

最初の例の構文を変更して、何が起こるかを確認してください。それが問題をより明確にすると思います。

Answer 4

現時点での回答はどれもReact 16.には適用されませんrender()メソッドで文字列、または文字列を返すことはまったく問題ありません。それは反応成分である必要はありません。

あなたの問題は、JSX transpilerの動作に関する誤解です。あなたが本当に知る必要があるのは、JSX（明らかにJSXとして識別できるもの）（ある場合は<xml />）が出現するまで、JSXトランスペーラーは何もしません。あなたの最初の例はJSXを持っていません。

JSXはJSXモードとJavaScriptモードの間を行き来する再帰的アルゴリズムです。 <xml />タグは、JSXモードに切り替えるようにトランスペイラに指示します。 JSXモードの場合、JSX中括弧構文（{echo stuff}）を使用してに戻り、JavaScriptモードに戻ります。

中括弧構文を使用してJavaScriptモードに切り替えようとしていますが、JSXモードではありません。あなたの最初の例にはJSXが含まれていないので、JSXのトランスパイライザはそれを他のBabelプロセスにそのまま渡します。構文

{array[0]} 

は有効ではありませんJavaScript。バベルは、あなたがオブジェクトを宣言しようとしていると思うでしょう。

{ apple: array[0] } 

またはES6プロパティ値の速記：そのために、バベルは、プレーンなオブジェクトリテラル構文のいずれかを期待している

{ apple } // assuming `apple` is a variable in scope 

あなたは、配列の0番目の要素をレンダリングしたい場合は、単にuse

return array[0]