REACT JS：未捕获错误：解析错误：意外的令牌

Question

我是新手做出反应（我将它整合到我的ruby on rails项目中），这里是我做的组件：

  <div id="articles"></div>
  <script type="text/jsx">



var Article=React.createClass({
    render: function(){
         return(
           <div>
             {this.props.data}.map(function(item){
               {item.name}  
             })
           </div>
         )
    }
});




var input = [{name: "hello", email: "hello@example.com"}]

React.render(<Article data={input} />, document.getElementById("articles"))

当我运行时，这是我得到的错误：

Uncaught Error: Parse Error: Line 7: Unexpected token .

{item.name}  

我已将道具设为阵列。我只想在数组中输出名称哈希键 - 为什么我得到这个错误，在我看来这应该有用？

Answer 1

你没有在map语句中返回任何内容，请尝试编写

return {item.name};

但是，我建议你尝试在即时渲染之外移动map-function，它更容易阅读，更不容易出错。

 <div id="articles"></div>
  <script type="text/jsx">

var Article=React.createClass({
    render: function() {
         var rows = this.props.data.map(function(item) {
               //You could return any valid jsx here, like <span>{item.name}</span>
               return item.name;
         });
         return(
           <div>  
               {rows}
           </div>
         )
    }
});

var input = [{name: "hello", email: "hello@example.com"}
React.render(<Article data={input} />, document.getElementById("articles"))

Answer 2

在JSX中你有两个'模式'。 JS模式（默认）和JSX模式。

您输入带有标记的JSX模式，例如<div。在JSX模式下，只允许使用标签，属性和任意文本。您也可以使用{}进入JS模式。这可能会发生很多次。

function jsMode(){
    <jsx>
        {js(
            moreJs,
            <moreJsx>{evenMoreJs}</moreJsx>
        )}
    </jsx>;
}

回到你的代码：

<div>
    {this.props.data}.map(function(item){
        {item.name}  
    })
</div>

让我们把它分解成块

// js mode
<div> // begin jsx
{ // begin js
    this.props.data // some js code
} // end js, back to jsx
.map(function(item) // this is just plain text visible to the user
{ // begin js
{item.name} // some invalid js, SyntaxError
} // end js
) // this is just plain text visible to the user
</div> // end jsx
// js mode

因为您希望.map被解释为JS，而您以前处于JSX模式，所以它也应该在{}s。

<div>
    {this.props.data.map(function(item){
        {item.name}  
    })}
</div>

此外，在.map回调中，您仍处于JS模式，因此您需要删除{}s

<div>
    {this.props.data.map(function(item){
        item.name
    })}
</div>

最后，您需要从.map回调中返回名称。

<div>
    {this.props.data.map(function(item){
        return item.name;
    })}
</div>

其他东西

上面的代码可以使用，但可能不如预期。

如果数据为[{name: 'foo'}, {name: 'bar'}]，则地图将返回['foo', 'bar']，并且反应会将其呈现为：

<span>foo</span><span>bar</span>

对用户而言，这显示为“foobar”。如果您希望它显示为两个单独的单词，您可以在每个名称后面添加一个空格：

<div>
    {this.props.data.map(function(item){
        return item.name + " ";
    })}
</div>

或者从.map返回一个元素并根据需要设置样式。例如，一个无序的名称列表。请注意，我们在item.name中包含{}s因为我们进入了JSX模式。

<ul>
    {this.props.data.map(function(item, i){
        return <li key={i}>{item.name}</li>;
    })}
</ul>

我们还提供一把钥匙。在这种情况下，它是项目的索引，只要列表永远不会更改，或者只在数组的末尾添加/删除项目，它就会起作用。

^{图片来源：wikipedia / commons}

如果重新排序数组，或者在开头或中间添加/删除项目，我们需要为每个项目添加唯一的字符串标识符。

如果您的数据是[{name: "foo", id: "14019751"}, {name: "bar", id: "13409185"}]，那么：

<ul>
    {this.props.data.map(function(item, i){
        return <li key={item.id}>{item.name}</li>;
    })}
</ul>