React项目中‘this’为保留字报错的原因及解决方法

嘿，我来帮你拆解这个问题：

错误根源 #

其实this本身在React里并不是什么特殊的保留关键字——它是JavaScript原生的保留关键字，但你这里的报错完全是JSX语法用错了：

看你render方法里的代码：

return (
  {this.state.items.map(item => (
    <Item id={item.id} key={item.id} name={item.name} image={item.image} />
  ))}
);

你在return()的括号里给map的结果额外套了一层{}，这会让JavaScript把这段代码解析成对象字面量。而在对象字面量里，this不能直接作为键名使用，所以才会抛出“this is a reserved word”的错误。

修复方法 #

很简单，去掉外层多余的{}就行，让map生成的组件列表直接作为JSX返回。另外，React要求组件的render方法必须返回单个根元素，所以最好给列表套一个容器（比如<div>，或者用<>片段语法），避免另一个常见警告：

import React, { Component } from "react";
import Item from "./components/Item";
import items from "./items.json";
import "./App.css";

class App extends Component {
  state = { items };
  render() {
    return (
      <div>
        {this.state.items.map(item => (
          <Item id={item.id} key={item.id} name={item.name} image={item.image} />
        ))}
      </div>
    );
  }
}

export default App;

小补充 #

再啰嗦一句：JSX里的{}是用来在HTML-like的标签里嵌入JavaScript表达式的，比如<p>{this.state.count}</p>。但return()的顶层已经是JSX表达式的上下文了，不需要额外加{}包裹整个返回内容哦～

内容的提问来源于stack exchange，提问作者Dennis Markham