ReactJs奇怪的錯誤：語法錯誤：意外的令牌（26:39）

這是我的示例代碼。我只是試圖從反應文檔執行一些代碼。我試圖TI使得數字增加了一倍名單：ReactJs奇怪的錯誤：語法錯誤：意外的令牌（26:39）

import React, { Component } from 'react'; 

class ListKeysComponent extends Component { 
    constructor(props) { 
     super(props); 

     const numbers = [1, 2, 3, 5, 8, 13]; 
     const doubled = numbers.map((number) => number * 2); 

     this.state = { 
      numbers: numbers, 
      doubled: doubled 
     }; 
    } 

    render() { 
     if (this.state.value > 2000) { 
      return null; 
     } 

     // render numbers in list elements 

     return (
      <div> 
       <ul> 
        for (var i = 0; i <= 5; i++) { 
         <li>{this.state.numbers[i]}</li> 
        } 
       </ul> 
      </div> 
     ); 
    } 
}

但我不理解爲什麼這個代碼生成此錯誤消息：

Failed to compile. 

Error in ./src/ListKeysComponent.js 
Syntax error: Unexpected token (26:39) 

    24 |    <div> 
    25 |     <ul> 
> 26 |      for (var i = 0; i <= 5; i++) { 
    |          ^
    27 |       <li>{this.state.numbers[i]}</li> 
    28 |      } 
    29 |     </ul> 

@ ./src/App.js 22:25-55

編輯：從loop inside React JSX

解決方案

render() { 
    if (this.state.value > 2000) { 
     return null; 
    } 

    var numrows = this.state.numbers.length; 
    var list = [] 
    for (var i = 0; i < this.state.numbers.length; i++) { 
     list.push(<li>{this.state.numbers[i]}</li>); 
    } 

    return (
     <div> 
      <ul> 
       {list} 
      </ul> 
     </div> 
    ); 
}

來源

2016-11-30 sensorario

這不是JSX是如何工作的。 –

的可能的複製[環路內作出反應JSX（http://stackoverflow.com/questions/22876978/loop-inside-react-jsx） –

我知道這是行不通的^ _ ^。我已經創建了一個問題來解決它。我已閱讀鏈接的回覆@FelixKling。但我真的不知道如何解決。 – sensorario

你不能在你的JSX標記一樣，裏面for環，雖然它感覺就像是你應該能夠。相反，你可以做這樣的事情......

var RepeatModule = React.createClass({ 
    getInitialState: function() { 
    return { items: [] } 
    }, 
    render: function() { 

    var listItems = this.props.items.map(function(item) { 
     return (
     <li key={item.name}> 
      <a href={item.link}>{item.name}</a> 
     </li> 
    ); 
    }); 

    return (
     <div> 
     <ul> 
      {listItems} 
     </ul> 
     </div> 
    ); 
    } 
});

下面是進入更詳細的關於how to create repeating pieces of UI in a React component一個職位。

來源

2016-11-30 06:45:10

試試這個：

<ul> 
    { 
     this.state.numbers.map(number => <li>{number}</li>) 
    } 
</ul>

使用Array.prototype.map這是因爲提供的JavaScript ES5來處理這種情況。

來源

2016-11-30 06:39:48 Swapnil

「試試這個」不是非常有用/有用。 *解釋*問題和你的解決方案，讓別人可以學習！仍然不是一個很好的解釋。爲什麼他們應該使用'.map'？爲什麼他們的代碼不工作？ –

另外，這個解決方案並不完全正確，因爲您正在創建一個「未定義」值的數組，而不是元素。 –

什麼是未定義的。 numbers數組在狀態中定義。我建議使用Array.prototype.map來遍歷它並渲染那些元素。 – Swapnil

ReactJs奇怪的錯誤：語法錯誤：意外的令牌（26:39）

回答

相關問題