Ответ 1
Непонятно, что вы спрашиваете, но:
реквизиты: пары ключ/значение, которые передаются от родителя компонента, а компонент не должен изменять его собственные реквизиты, реагировать только на изменения реквизита от родительского компонента.
state: вроде как реквизит, но они изменяются в самом компоненте с помощью метода setState
.
вызывается метод render
при изменении реквизита или состояния.
Что касается части typescript, то React.Component
принимает два типа в качестве обобщений: один для реквизита и один для состояния, ваш пример должен выглядеть больше:
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
(я сделал их все строки, но они могут быть любыми, что вы хотите).
Я не уверен, действительно ли эти поля должны находиться в состоянии, а не в реквизитах, но вы вызываете его.