Question

我有一个react组件，我试图在其中呈现一个字符串单词列表。我在数组中有单词，我可以在其上应用map。问题是，我想将索引设置为列表中每个对象的键。这是组件：

export default class RandomWords extends Component{

  var ID=-1;
  createWord(word){
    ID++;
    return ({
      id:ID,
      text:word
    });

  }

    renderList(){

      return this.props.words.map((word)=>{
          const wrappedText=this.createWord(word);
          return (<li key={wrappedText.id}  className="item">
                  <Word value={wrappedText.text}></Word>
          </li>);
       })
    }
      render(){
      //  console.log("words are:"+this.props.words);
          return(
                  <ul className="list">
                      {this.renderList()}
                </ul>)
      };
}

要生成ID，我看到了this，我创建了createWord(word)函数，但在var ID=-1;行中它抱怨：

 Unexpected token, expected (

1 - 我的代码出了什么问题？

2 - 如何设置从0开始到列表的整数？

Answer 1

您只能将方法放在ES6类中。相反，像这样重写你的类：

export default class RandomWords extends Component {

  constructor(props) {
    super(props);
    this.ID = -1;
  }

  createWord(word){
    this.ID++;
    return ({
      id: this.ID,
      text: word
    });

  }
  // ...
}

或者，如果您希望ID在所有实例中全局递增：

let ID = -1;
export default class RandomWords extends Component {

  createWord(word){
    ID++;
    return ({
      id: ID,
      text: word
    });

  }
  // ...
}

Answer 2

正如评论中指出的那样，你不能让var像这样自由浮动。无论如何，更好的解决方案是使用map的内置索引。由于这是一个生成器函数，第二个参数是索引，因此，您可以将逻辑更改为：

return this.props.words.map((word, i)=>{
  return (<li key={i}  className="item">
      <Word value={word}></Word>
  </li>);
})

React：意外的令牌，预期（

2 个答案: