我正在做一个同时使用TypeScript和React的项目，我对这两个都不熟悉。我的问题是关于TypeScript中的接口以及它与属性和状态的关系。实际上发生了什么？我的应用程序根本无法运行，除非我声明接口属性和状态。但我通过React构造函数使用状态，我看到过所有这些信息都进入“interface MyProps”或“接口MyStates“。以下面的代码为例：
"use strict";
import * as React from 'react'
import NavBar from './components/navbar.tsx'
import Jumbotron from './components/jumbotron.tsx';
import ContentPanel from './components/contentPanel.tsx';
import Footer from './components/footer.tsx';
interface MyProps {}
interface MyState {}
class Root extends React.Component <MyProps, MyState> {
constructor(props) {
super(props);
this.state = {
///some stuff in here
};
}
render() {
return (
<div>
<NavBar/>
<Jumbotron content={this.state.hero}/>
<ContentPanel content={this.state.whatIs}/>
<ContentPanel content={this.state.aboutOne}/>
<ContentPanel content={this.state.aboutTwo}/>
<ContentPanel content={this.state.testimonial}/>
<Footer content={this.state.footer}/>
</div>
)
}
}
export default Root;（我已经删除了这个.state中的内容，只是为了在这里发布）。为什么我需要界面？什么是正确的方法来做到这一点，因为我认为我是以JSX的方式而不是TSX的方式来思考这个问题的。
1条答案
按热度按时间wpx232ag1#
我不清楚你到底在问什么，但是：
props：是从组件的父组件传递过来的键/值对，组件不应该改变它自己的props，而只对来自父组件的props的改变做出React。
state：有点像props，但它们是在组件本身中使用
setState方法更改的。当属性或状态已经改变时，调用X1 M1 N1 X方法。
至于类型脚本部分，
React.Component将两个类型作为泛型，一个用于props，一个用于state，您的示例应该看起来更像：正如您所看到的，
MyState接口定义了稍后在组件this.state成员中使用的字段（我将它们都设置为字符串，但它们可以是您想要的任何内容）。我不确定这些字段是否真的需要在状态中而不是在 prop 中，但这是你的决定。