Typescript中的界面状态和propsreact

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

props :是从组件的父组件传递的键/值对，组件不应该更改自己的props ，只应对父组件props 的更改做出react .

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

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

至于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接口定义了后来在component this.state成员中使用的字段(我将它们都设置为字符串，但它们可以是您想要的任何内容).

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