在反应组件类中看不到 props 属性答案

【问题标题】：props property not seen in react component class在反应组件类中看不到 props 属性
【发布时间】：2018-11-13 22:24:49
【问题描述】：

我开始学习 React，目前正在使用 Visual Studio 2017 编写一个基本的 hello world web 应用程序。我的 index.html 文件如下：

<body>
    <div id="root"></div>
    <!-- scripts -->
    <script src="./dist/app-bundle.js"></script>
</body>

而我的 app.tsx 文件如下（app.tsx 被转译为 ./dist/app-bundle.js）：

declare var require: any

var React = require('react');
var ReactDOM = require('react-dom');

class Hello extends React.Component {
    render() {
        return (
            <h1>Welcome to dsdasd!!</h1>
        );
    }
}

ReactDOM.render(<Hello />, document.getElementById('root'));

以上两个文件工作正常。但是，当我尝试在 Hello 类中使用 props 属性（如下所示在修改后的 app.tsx 中）时，转译器显示错误，

declare var require: any

var React = require('react');
var ReactDOM = require('react-dom');

class Hello extends React.Component {
    render() {
        return (
            <h1>Welcome to {this.props.message}!!</h1>
        );
    }
}

ReactDOM.render(<Hello message = "some message"/>, document.getElementById('root'));

错误：TS2339: Property 'message' does not exist on type '()'

如何解决此错误？我的理解是 props 和 state 在 react 组件中总是可用的。非常感谢任何帮助。

【问题讨论】：

你有没有试过去掉最后一行=前后的空格？
@Masious，我做到了，但错误仍然存在......空格重要吗？

标签： javascript reactjs

【解决方案1】：

你需要为 Typescript + React 组件指定 props 接口：

interface Props {
  message: string;
}

class Hello extends React.Component<Props> {
  render() {
    return (
      <h1>Welcome to {this.props.message}</h1>
    );
  }
}

【讨论】：

感谢您的回答。但是，我仍然遇到同样的错误……还有什么我可能遗漏的吗？
@estus，这似乎是正确的......虽然我确实重新编译了项目并且错误仍然存在
@mettleap 问题是你使用require。 require 应该仅在您希望模块类型不安全时使用。使用import。