Question

这是我的示例代码。我只是想从反应文档中执行一些代码。我正在尝试将渲染加倍的数字列表：

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

Answer 1

你不能在你的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。

的帖子

Answer 2

试试这个：

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

使用自JavaScript ES5以来可用的Array.prototype.map来处理这种情况。

ReactJs奇怪的错误：语法错误：意外的令牌（26:39）

2 个答案: