不能在return裏面使用塊（）React JSX

我在學習React JS，並面臨JSX的一個問題。我有一個組件：不能在return裏面使用塊（）React 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 ,

但如果我包裏面{array[0]}標籤<span>，這個工程。

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

我覺得我的核心JavaScript不好，請幫我理解這個問題。謝謝。

來源

2017-10-28 Hom nom nom nom ...

這是* not *核心JavaScript，它是React的jsx語法。 – Bergi

響應組件呈現必須返回一個有效的HTML，並將其封裝到一個HTML容器標記（例如DIV）中。我想你應該仔細檢查反應如何工作。

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

來源

2017-10-28 15:56:47 Umesh

我相信，因爲渲染方法只render a single root可以，所有你需要做的就是把它包起來inisde有效的HTML標記，像這樣將是：

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

來源

2017-10-28 16:03:12 Aaqib

的問題是因爲在第一例如你沒有返回一個有效的元素。

當您有一個組件在render方法中返回某些東西時，返回的是由React.createElement創建的HTML元素。

Here你可以看到巴貝爾做了什麼。

嘗試改變你的第一個例子的語法來看看會發生什麼，然後我認爲它會讓事情變得更加清晰。

來源

2017-10-28 16:08:45

目前的答案沒有在React 16中應用。在render()方法中返回一個字符串，甚至是一個字符串數組，完全沒問題。它不必是一個反應組件。

你的問題是對JSX轉譯器如何工作的誤解。你真正需要知道的是，JSX轉換器在它遇到可以清楚識別爲JSX的東西（一些<xml />）之前什麼也不做。你的第一個例子沒有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個元素，只是使用

return array[0]

來源

2017-10-28 16:32:57 bowheart

不能在return裏面使用塊（）React JSX

回答

相關問題