不能在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不好，请帮我理解这个问题。谢谢。

这是* not *核心JavaScript，它是React的jsx语法。 – Bergi

答

响应组件呈现必须返回一个有效的HTML，并将其封装到一个HTML容器标记（例如DIV）中。我想你应该仔细检查反应如何工作。

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

答

我相信，因为渲染方法只render a single root可以，所有你需要做的就是把它包起来inisde有效的HTML标记，像这样将是：

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

答

的问题是因为在第一例如你没有返回一个有效的元素。

当您有一个组件在render方法中返回某些东西时，返回的是由React.createElement创建的HTML元素。

Here你可以看到巴贝尔做了什么。

尝试改变你的第一个例子的语法来看看会发生什么，然后我认为它会让事情变得更加清晰。

答

目前的答案没有在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]

不能在return里面使用块（）React JSX

相关推荐