Показать компонент if 'true', иначе показать другой компонент (в реактиве)

Im пытается показать тот или иной компонент в реактиве. Я могу показать компонент по щелчку, но я не могу показать другое.Показать компонент if 'true', иначе показать другой компонент (в реактиве)

React Код:

import React, { Component } from 'react' 
import { Motion, spring } from 'react-motion' 

import Header from '../../components/services/Header' 
import ServiceSelector from '../../components/services/ServiceSelector' 
import PriceCalculator from '../../components/services/PriceCalculator' 
import VVSRequest from '../../components/services/VvsRequest' 
import VVSFeatures from '../../components/services/VVSFeatures' 
import GalleryPreview from '../../components/services/GalleryPreview' 
import Footer from '../../components/services/Footer' 

require('styles/_servicesPage/services.css') 
require('styles/_servicesPage/serviceSelector.css') 
var ReactCSSTransitionGroup = require('react-addons-css-transition-group'); 

export default class Services extends Component { 

    componentWillMount() { 
    this.state = { 
     showPriceCalculator: false 
    } 
    } 

    handleClick(e) { 
    const userChoice = e.target.className 
    this.setState({ userChoice }) 
    } 

    toggleDiv(toggle) { 
    console.log('te',toggle); 
    this.setState({showPriceCalculator: toggle}) 
    } 

    render() { 
    var styleVar = { 
     backgroundImage: 'url(assets/images/services/service_bg.jpg)' 
    } 

    return (
     <div> 
     <Header /> 
     <ServiceSelector toggleDiv={this.toggleDiv.bind(this)}/> 

     {this.state.showPriceCalculator ? 
      <PriceCalculator toggleDiv={this.toggleDiv.bind(this)}/> : <VVSFeatures />} 

      {/*<VVSFeatures /> 
      <VVSRequest />*/} 

     <GalleryPreview /> 
     <Footer /> 
     </div> 
    ) 
    } 
}

На нагрузке он показывает

<VVSFeatures />

как это должно

, но после того, как состояние устанавливается в

showPriceCalculator: true

и тогда снова установить значение false, noth (должно появиться снова)

Он воспроизводит правильное значение состояния, но ничего не происходит. Что может быть неправильным?

Спасибо!

источник

2016-09-20 AlfredO

Are вы 100% уверены, что состояние является правильным? Кроме того, я не знаю, где вы используете этот 'handleClick', но' this.setState ({userChoice}) 'может переписывать ваше состояние. Может быть, поставить console.log состояния внутри рендера, чтобы вы могли видеть его в каждой точке, чтобы дважды проверить? Где часть кода, которая возвращает значение false? – ajmajmajma

Откуда вы знаете, что он редертирует с правильным состоянием? вы можете сделать 'console.log ('showPriceCalculator:', this.state.showPriceCalculator)' after' render() {'и сообщить нам, если вы видите правильное значение? –

Да, я вышел из состояния внутри метода рендеринга, и я напечатал true, когда я из ServiceSelector установил его в true, и он напечатал false, когда я установил его в false из компонента PriceCalculator. – AlfredO

-1

я установить значение «истина» в качестве параметра, то есть строка не булево

источник

2016-09-22 13:53:24 AlfredO

-1

Значение переключателя может быть получено из компонента ServiceSelector или PriceCalculator, который, как я думаю, приведет к несогласованным результатам. Рассмотрим случай, когда ServiceSelector вызывает this.props.toggleDiv (true), а затем компоненты PriceCalculator также вызывает this.props.toggleDiv (true). Вы на самом деле не переключаетесь. Государство для контроля распространяется в разных местах. Infact, вам не нужно отправлять какой-либо параметр переключения из любого из этих компонентов.

Вы можете просто

toggleDiv() { 
    this.setState({showPriceCalculator: !this.state.showPriceCalculator}) 
    }

источник

2016-09-20 16:00:13

Привет, новитель, Не могли бы вы объяснить причину падения? –

Я согласен с этим, именование немного выключено. Причина этого заключается в том, что если я нажимаю один div, он должен только иметь значение true, и наоборот. Но это не помогает в том, что родительский компонент не повторно отображает компонент! (ps, он не уменьшался) – AlfredO

Я подготовил рабочую демо-версию для вас здесь: http://codepen.io/PiotrBerebecki/pen/yaVaLK

Будет ли это решение для работы вашего предполагаемого использования?

class Services extends React.Component { 
    constructor() { 
    super(); 
    this.state = { 
     showPriceCalculator: false 
    }; 
    } 

    handleClick(e) { 
    const userChoice = e.target.className 
    this.setState({ 
     userChoice 
    }) 
    } 

    toggleDiv() { 
    this.setState({ 
     showPriceCalculator: !this.state.showPriceCalculator 
    }) 
    } 

    render() { 
    return (
     <div> 
     <div>Header</div> 
     <ServiceSelector toggleDiv={this.toggleDiv.bind(this)} /> 

     {this.state.showPriceCalculator ? <div toggleDiv={this.toggleDiv.bind(this)}>PriceCalt</div> : <div>VVSFeatures</div>} 

     </div> 
    ); 
    } 
} 


class ServiceSelector extends React.Component { 
    toggleDiv() { 
    this.props.toggleDiv() 
    } 

    render() { 
    return (
     <p onClick={this.toggleDiv.bind(this)}>Click here - ServiceSelector</p> 
    ) 
    } 
}

источник

2016-09-20 16:09:39

Он работал с ответом раньше, но спасибо за ваши усилия! – AlfredO

Отлично. Рад, что вы нашли решение. –

Показать компонент if 'true', иначе показать другой компонент (в реактиве)

ответ

Смежные вопросы