javascript - 在 React 组件类中看不到 props 属性-6ren

javascript - 在 React 组件类中看不到 props 属性

转载作者：行者123 更新时间：2023-12-01 01:30:51

我开始学习 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:类型“()”上不存在属性“消息”

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

最佳答案

您需要为 Typescript + React 组件指定 props 接口(interface):

interface Props {
  message: string;
}

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

关于javascript - 在 React 组件类中看不到 props 属性，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53290435/

文章推荐：对变量中可能存在 None 的类进行排序的 Pythonic 方式

文章推荐： google-chrome - Screencastify Chrome 应用程序如何工作？

文章推荐： python - 使用正前瞻或后顾的增强赋值操作的正则表达式

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 在 React 组件类中看不到 props 属性