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

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

  2. Этот «основной» компонент содержит компонент под названием «House».

  3. И этот компонент «Дом» содержит компонент с именем «ZoneButton», который содержит Кнопку.

Если я нажму кнопку, я хочу заменить компонент "Дом" другим компонентом под названием "Салон" внутри "Главного< /strong>».

(размонтировать компонент и смонтировать (загрузить) другой компонент вместо первого)

Вы знаете, как я могу это сделать? Заранее спасибо :)

EDIT Да, извините, вот мои 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

reactjs setstate components parent onclick
person Gregooo    schedule 12.02.2019    source источник
comment
добавьте свой код для лучшего понимания   -  person Kajol Chaudhary    schedule 12.02.2019
comment
Сначала вы должны приложить усилия, мы не будем делать вашу домашнюю работу за вас, если вы покажете нам попытку, которая имеет конкретную проблему, мы можем помочь   -  person Josh Pittman    schedule 12.02.2019
comment
Как прокомментировали другие, попробуйте самостоятельно решить проблему. Если это не работает для вас, сообщите нам, что вы пробовали (опубликуйте код, который вы пробовали). Тогда мы можем помочь. Либо это будет изменение кода, либо изменение строки, либо изменение логики. Но вы должны сначала попробовать.   -  person smilyface    schedule 12.02.2019
comment
Да, извините, вы абсолютно правы. Я просто добавил 3 компонента. Я постараюсь добавить первое решение.   -  person Gregooo    schedule 12.02.2019

Ответы (1)


arrow_upward
1
arrow_downward

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