我找不到的 React.js 组件语法错误（意外令牌）

Question

大家好，感谢您的帮助。 在将 Rails 应用程序上的 ruby 从 rails v5.0 更新到 6,0 时，我的一个 react 组件遇到了错误，尽管我尝试使用许多 JS linter 修复它。 我找不到任何合适的解决方案。

这就是我得到的 output：

SyntaxError: unknown: Unexpected token (3:8)
  1 | class AvatarUploadInline extends React.Component {
  2 | 
> 3 |   state = { url: this.props.url };
    |         ^
  4 | 
  5 |   trigger = (event) => {
  6 |     event.preventDefault();

这是组件本身：

class AvatarUploadInline extends React.Component {

  state = { url: this.props.url };

  trigger = (event) => {
    event.preventDefault();
    $("#artist_avatar").click();
  }

  showPreview = (changeEvent) => {
    changeEvent.preventDefault();
    var reader = new FileReader();
    reader.onload = (fileReadEvent) => {
      this.setState({ url: fileReadEvent.target.result });
    };
    reader.readAsDataURL(changeEvent.target.files[0]);
  }

  render () {
    return <div className="m-form__upload-avatar">
      <input name="artist[avatar]" id="artist_avatar" type="file" onChange={this.showPreview} />
      <span id="avatar" style={{ backgroundImage: `url(${this.state.url})` }} className="m-form__upload-avatar__image" />
      <span className="m-form__upload-avatar__icon" onClick={this.trigger} />
    </div>;
  }
}

非常感谢你的协助！

Answer 1

你可以编辑你的.babelrc 文件来使用这个语法。 这将解决您在其他地方的问题以及功能。

{
  "presets": [
    ["es2016"],
    "react"
  ],
  "plugins": [
    "babel-plugin-transform-class-properties"
  ]
}

Answer 2

如 React 文档中所述，创建一个构造函数并在那里初始化您的 state 以避免错误。

像这样：

class AvatarUploadInline extends React.Component {

 constructor(props) {
  super(props);
  this.state = {
   url: props.url
  }
 }
 ...
}

您可以在此处阅读更多信息。