Существуют различные способы, вы можете добиться этого, в том числе React-маршрутизаторы и Redux, но так как вы новичок в React, это будет хорошо, если вы освоитесь с основами в первую очередь. Для начала вам необходимо изменить состояние основного компонента, чтобы решить, какой дочерний компонент должен отображаться.
В основном коде компонента фрагмент кода вы вывесили, инициализировать состояние в конструкторе следующим образом:
/* in the main component */
constructor(props) {
super(props);
this.state = {
showAbout: true
};
}
Затем измените функцию визуализации следующим образом, чтобы передать ссылку на ваш основной компонент, вплоть до вашего заголовка компонент:
/* in the main component */
<HeaderComponent mainComponent={this}/>
Затем в HeaderComponent присоедините обработчик событий нажмите на ссылку, на которую вы хотите выполнить операцию.
/* in HeaderComponent */
<a href="#" ....... onClick={this.showAbout.bind(this)}>Show About</a>
В том же компоненте, определим функцию showAbout следующим образом:
/* in HeaderComponent */
showAbout() {
let mainComponent = this.props.mainComponent;
mainComponent.setState({
showAbout: true
)};
}
Наконец, еще в функции визуализации основного компонента:
/* in the main component */
render() {
let mainHeroComponent, aboutComponent;
if (this.state.showAbout) {
aboutComponent = (
<AboutComponent/>
);
} else {
mainHeroComponent = (
<MainHeroComponent/>
);
}
return (
<div className="index">
<HeaderComponent mainComponent={this}/>
{mainHeroComponent}
{aboutComponent}
</div>
);
}
И вы сделали ! В принципе, компонент получает повторную визуализацию каждый раз, когда изменяется его состояние. Поэтому каждый раз, когда вы нажимаете на ссылку, состояние основного компонента изменяется с новым значением showAbout. Это приведет к тому, что основной компонент повторно отобразит себя, и, основываясь на значении showAbout, он решит, следует ли отображать MainHeroComponent или AboutComponent.
Но вы должны убедиться, что у вас есть аналогичная логика для отображения MainHeroComponent, а не AboutComponent, просто чтобы переключить представления.
реквизиты и обратный вызов сделают трюк для вас :) – Amit