React：onClick替换父组件

Question

1. 我有一个名为“Main”的组件。
2. 这个“Main”组件包含一个名为“House”的组件。
3. 而这个“House”组件包含一个名为“ZoneButton”的组件，其中包含一个Button

如果我点击按钮，我想用“Main”组件中的另一个名为“Saloon”的组件替换“House”组件。

（卸载组件并挂载（加载）另一个组件而不是第一个组件）

你知道我怎么做的吗？提前致谢 ：）

编辑是的，对不起，这是我的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.is包含按钮的数据

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

Answer 1

您可以在组件的状态中存储布尔值并切换子组件，或者调用它们并修改它们的类以便隐藏或显示它们（如果您需要css动画，这可能很有用）

Main.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;