接口状态和打字稿中的道具反应 [英] interface states and props in typescript react

问题描述

我正在开发一个使用打字稿以及反应的项目，并且两者都是新手.我的问题是关于打字稿中的界面以及它与道具和状态的关系.实际发生了什么?除非声明接口属性和状态，否则我的应用程序根本不会运行，但是我通过react构造函数使用状态，并且我已经看到了一些示例，其中所有这些信息都将放入接口MyProps"或接口MyStates"中，因此请使用以下代码例子

I'm working on a project that uses typescript as well as react and am new to both. My questions is about interface in typescript and how that relates to props and states. What is actually happening? My application doesnt run at all unless I declare interface props and states, but Im using states through the react constructor function and I've seen examples where all of that information would go into 'interface MyProps' or 'interface MyStates' take this code for example

"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中的内容，只是要在此处发布).为什么需要界面?正确的方法是什么，因为我认为我是用jsx而不是tsx的方式来考虑这个问题.

(I've removed the content in this.state just to post on here). Why do i need interface? What would be the correct way to do this, since I think I'm thinking of this in the jsx way and not the tsx way.

推荐答案

不清楚您要问的是什么，但是:

It's not clear what you're asking exactly, but:

props:是从组件的父级传递的键/值对，并且组件不应更改其自身的props，而仅对父级组件中props的更改做出反应.

props: are the key/value pairs that are being passed from the parent of the component and a component should not change it's own props, only react to changes of props from the parent component.

状态:有点像道具，但是它们可以使用setState方法在组件本身中进行更改.

state: kinda like props but they are changed in the component itself using the setState method.

当道具或状态发生变化时，将调用render方法.

the render method is called when the props or state have changed.

对于打字稿部分，React.Component采用两种类型作为泛型，一种用于道具，一种用于状态，您的示例应类似于:

As for the typescript part, the React.Component takes two types as generics, one for the props and one for the state, your example should look more like:

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界面定义了字段，这些字段以后将在组件this.state成员中使用(我将它们全部做成字符串，但可以是您想要的任何东西).

As you can see, the MyState interface defines the fields which are later used in the component this.state member (I made them all strings, but they can be anything you want).

我不确定这些字段是否真正需要处于状态而不是道具中，但这是您需要调用的.

I'm not sure whether or not those fields actually need to be in state and not in props, but that's you call to make.

这篇关于接口状态和打字稿中的道具反应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！