React 组件：声明或声明预期 ts(1128)答案

【问题标题】：React Component: Declaration or statement expected ts(1128)React 组件：声明或声明预期 ts(1128)
【发布时间】：2021-10-26 06:45:37
【问题描述】：

我对 React 还很陌生，并且经常在语法安静方面遇到一些麻烦。以下代码给了我错误：声明或声明预期 ts(1128)

扫描互联网我得出的结论是很可能缺少一些括号？！

import React, { Component } from 'react';
import AuthContext from './AuthContext';

// Then create a provider Component to update children Components once the user role changes
class AuthProvider extends Component {
    constructor() {
      super()
      this.state = {
          role: "none"
      }
  }

  render() {
    return (
      <AuthContext.Provider value={{
        state: this.state,
        isAuthenticated: () => {
          if (this.state.role == "kursleiter" || this.state.role == "admin") {
            return true
          }
          return false},
        setRole: (newRole) => this.setState({
            role: newRole
        })
      }}>
        {this.props.children}
      </AuthContext.Provider>
    )
  }
}

export default AuthProvider

【问题讨论】：

看起来不错，还有其他线索吗？

标签： reactjs authentication

【解决方案1】：

在我的网站上超级愚蠢：文件名不匹配，仅此而已。

【讨论】：

【解决方案2】：

您需要将代码提取到一个函数中，以便您可以调用它们。示例：

const isAuthenticated = () => {
 // ...
}

现在，您可以使用：

value={{
  state: this.state,
  isAuthenticated: isAuthenticated()

之前，您使用的是函数而不是它的调用。所以，react 给你的预期语句抛出了错误。

【讨论】：

谢谢，但这并不能解决我的问题。

【解决方案3】：

我通过重命名确切的组件文件来修复它。所以也许我有projects.jsx 然后改为project.jsx。令人惊奇的是，当我切换回原来的文件名 (projects.jsx) 时，错误不再发生。

【讨论】：

TypeScript 的魔力