Реагировать: onClick заменить родительский компонент - PullRequest
Новая
       32

Реагировать: onClick заменить родительский компонент

0 голосов
/ 12 февраля 2019

  1. У меня есть компонент с именем " Main ".

  2. Этот компонент "Main" содержит компонент с именем " House" ".

  3. И этот компонент" Дом "содержит компонент с именем" 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

1 Ответ

0 голосов
/ 12 февраля 2019

Вы можете либо сохранить логическое значение в состоянии компонента и переключить дочерние компоненты, либо вызвать их оба и изменить их классы, чтобы они были скрыты или отображались (это может быть полезно, если вам нужны анимации 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;
...