reactjs - typescript 中的界面状态和 Prop react

Question

我正在开发一个使用 TypeScript 和 React 的项目，我对这两者都是新手。我的问题是关于 TypeScript 中的接口(interface)以及它与 Prop 和状态的关系。到底发生了什么？除非我声明界面 Prop 和状态，否则我的应用程序根本不会运行，但我通过 React 构造函数使用状态，并且我看到了所有这些信息都将进入“界面 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;

(我删除了 this.state 中的内容只是为了在此处发布)。为什么我需要接口(interface)？这样做的正确方法是什么，因为我认为我是以 JSX 方式而不是 TSX 方式考虑的。

Answer 1

不清楚你到底在问什么，但是:

props:是从组件的父级传递的键/值对，组件不应该改变它自己的 props，只对来自父组件的 props 的变化使用react。

state:有点像 props，但它们是在组件本身中使用 setState 方法更改的。

render 方法在 props 或 state 改变时被调用。

至于 typescript 部分，React.Component 采用两种类型作为泛型，一种用于 props，一种用于状态，您的示例应该看起来更像:

interface MyProps {}

interface MyState {
    hero: string;
    whatIs: string;
    aboutOne: string;
    aboutTwo: string;
    testimonial: string;
    footer: string;
}

class Root extends React.Component <MyProps, MyState>  {
    constructor(props) {
        super(props);

        this.state = {
            // populate state fields according to props fields
        };
    }

    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>
        )
    }
}

如你所见，MyState 接口(interface)定义了组件 this.state 成员中稍后使用的字段(我将它们全部设为字符串，但它们可以是任何你想要的)。

我不确定这些字段是否真的需要在状态中而不是在 Prop 中，但这就是你要做的。