Question

我有一个非常简单的React组件，我注意到，如果我在这样的组件中编写函数，则我的react hot reload无法正常工作

class Profile extends Component {
  renderSkills = () => skills.map(skill => (
    <div key={skill}>
      <Button>{skill} + 3</Button>
    </div>
  ))

  render() {
    return (
      <div>{this.renderSkills()}</div>
    )
   }
}

但是如果我这样写就可以了

renderSkills() {
    return skills.map(skill => (
      <div key={skill}>
        <Button>{skill} + 3</Button>
      </div>
    }

因此，如果在函数内更改某些内容，则仅在该函数内无法进行热重装。如果我在此以外进行任何更改，都可以正常工作。

在控制台中，我看到已应用更改，直到我重新加载页面后，该更改才显示在屏幕上。

可能是什么问题？

Answer 1

我相信您需要包括@babel/plugin-proposal-class-properties才能支持以下语法。

renderSkills = () => skills.map(skill => (
    <div key={skill}>
      <Button>{skill} + 3</Button>
    </div>
  ))

React Hot Reload在箭头功能上不起作用

1 个答案: