Question

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

while(line = reader.readLine() != null) {
  // some code
}

我的app.tsx文件如下（将app.tsx转换为./dist/app-bundle.js）：

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

以上两个文件工作正常。但是，当我尝试使用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 dsdasd!!</h1>
        );
    }
}

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

错误：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'));

如何解决此错误？我的理解是，道具和状态始终可以在反应组件中使用。任何帮助将不胜感激。

Answer 1

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

interface Props {
  message: string;
}

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

在react组件类中未看到props属性

1 个答案: