У меня есть компонент с именем " Main ".
Этот компонент "Main" содержит компонент с именем " House" ".
И этот компонент" Дом "содержит компонент с именем" ZoneButton", который содержит кнопку
Если я нажму на кнопку , я хочу заменить компонент " House " другим компонентом под названием " Saloon " внутри " Основной"компонент.
(размонтировать компонент и смонтировать (загрузить) другой компонент вместо первого)
Знаете ли вы, как я могу это сделать?Заранее спасибо:)
РЕДАКТИРОВАТЬ Да, извините, вот мои 3 компонента
Main.js
import React, { Component } from 'react';
import SearchBar from './SearchBar';
import House from './House';
// import Salon from './Saloon';
class Main extends Component {
render(){
return(
<div>
<House />
{/* <Saloon /> */}
</div>
)
}
}
export default Main;
House.js
import ZoneButton from './ZoneButton';
import zoneHouseData from './zoneHouseData';
class House extends Component {
render(){
const zoneComponents = zoneHouseData.map(item => <ZoneButton key={item.id} zoneName={item}/>)
return(
{zoneComponents}
)
}
}
ZoneButton.js
class ZoneButton extends Component {
render() {
return(
<React.Fragment>
<Button variant="contained" color="primary" onClick={this.unmountHouse} style={styles}>{this.props.zoneName.name}</Button>
</React.Fragment>
);
}
}
export default ZoneButton
И zonHomeData.js содержит данные для кнопок
const zoneHouseData = [
{
id: 1,
symbol: '+',
name: 'Salon',
intro_text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vel efficitur felis. Praesent at magna vestibulum lectus euismod interdum. Etiam mauris nulla, lacinia porttitor lacinia',
image: gray,
top: '34%',
left: '38%'
},
{
id: 2,
symbol: '+',
name: 'Cuisine',
intro_text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vel efficitur felis. Praesent at magna vestibulum lectus euismod interdum. Etiam mauris nulla, lacinia porttitor lacinia',
image: gray,
top: '51%',
left: '38%'
},
{
id: 3,
symbol: '+',
name: 'Chambre',
intro_text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vel efficitur felis. Praesent at magna vestibulum lectus euismod interdum. Etiam mauris nulla, lacinia porttitor lacinia',
image: gray,
top: '17%',
left: '46%'
},
]
export default zoneHouseData