reactjs - 反应:onClick替换父组件
问题描述
我有一个名为“ Main ”的组件。
这个“Main”组件包含一个名为“ House ”的组件。
而这个“House”组件包含一个名为“ ZoneButton ”的组件,其中包含一个Button
如果我单击按钮,我想用“ Main ”组件内的另一个名为“ Saloon ”的组件替换“ House ”组件。
(卸载组件并安装(加载)另一个组件而不是第一个组件)
你知道我该怎么做吗?提前致谢 :)
编辑是的,对不起,这是我的 3 个组件
主.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
解决方案
您可以在组件的状态中存储一个布尔值并切换子组件,或者调用它们并修改它们的类以便隐藏或显示它们(如果您需要 css 动画,这可能很有用)
主.js
import React, { Component, Fragment } from 'react';
import SearchBar from './SearchBar';
import House from './House';
import Salon from './Saloon';
import ZoneButton from './ZoneButton';
class Main extends Component {
constructor(props) {
this.state = { zone: true }
}
toggleZone = () => {
this.setState(prevState => ({ zone: !prevState.zone }));
}
render(){
return(
<Fragment>
{ zone ? <House /> : <Saloon /> }
<ZoneButton toggleZone={this.toggleZone} />
</Fragment>
)
}
}
export default Main;
ZoneButton.js
import React, { Component, Fragment } from 'react';
class ZoneButton extends Component {
render(){
const { toggleZone } = this.props;
return(
<Fragment>
<Button variant="contained" color="primary" onClick={() => {toggleZone()}} style={styles}>{this.props.zoneName.name}</Button>
</Fragment>
)
}
}
export default ZoneButton;
推荐阅读
- google-apps-script - 我无法通过 Google Apps 脚本将自动电子邮件附件导入 Google Drive
- python - uuid.NAMESPACE_URL 是否会为不同的 URL 生成唯一的确定性 UUID?
- javascript - 在 Node 中运行后台进程的最佳实践?
- r - R - 改变表格的顺序
- excel - Sumif 只有列中每个组的第一个值
- flutter - 如何仅对 appBar 图标“设置状态”而不是“通知侦听器”
- python - Python NaN 问题
- wordpress - 安装 SSL 证书后,只显示主页
- oauth-2.0 - 从刷新令牌中获取授权用户和范围
- java - tomcat jdbc - ScheduledExecutre 最初插入工作然后失败,没有错误