REACT JS：未捕獲的錯誤：解析錯誤：意外的令牌

Question

我是新來的反應者（我將其合並到我的ruby on rails項目中），在這里，組件ive做了：

  <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}  

我已經將prop設置為數組。 我只想在數組中輸出名稱哈希鍵-為什么我收到此錯誤，在我看來這應該起作用？

Answer 1

您沒有在地圖聲明中返回任何內容，請嘗試編寫

return {item.name};

但是，我建議您嘗試將地圖功能移到即時渲染之外，它更易於閱讀且不易出錯。

 <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'}] ，則map將返回['foo', 'bar'] ，並且react會將其呈現為：

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

對於用戶，這顯示為“ foobar”。 如果您希望它顯示為兩個單獨的單詞，則可以在每個名稱后放置一個空格：

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

或從.map返回一個元素並根據需要設置其樣式。 例如，一個無序的名稱列表。 請注意，由於進入JSX模式，因此此處將item.name包裝在{}s 。

<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>