顯示組件是否爲true，否則顯示其他組件（在React中）

Question

Im試圖顯示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發生（應該再次出現）

它以正確的狀態值恢復，但沒有任何反應。 什麼可能是錯的？

謝謝！

Answer 1

我將值設置爲「真」作爲參數，即一個字符串不是布爾

Answer 2

切換值可能來自ServiceSelector組件或PriceCalculator，我認爲這會導致不一致的結果。考慮ServiceSelector調用this.props.toggleDiv（true）時的情況，然後PriceCalculator組件也調用this.props.toggleDiv（true）。你實際上並沒有切換。控制的狀態分散在不同的地方。事實上，你不需要從任何這些組件發送任何切換參數。

你可以只

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

Answer 3

我已經爲你準備了這裏的工作演示：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> 
    ) 
    } 
}