'true'の場合はコンポーネントを表示し、そうでない場合は他のコンポーネントを表示します（0123）。

Question

Reactに1つまたは他のコンポーネントを表示しようとしています。クリックでコンポーネントを表示することはできますが、他のコンポーネントを表示することはできません。それは

それが必要などなく、状態は

showPriceCalculator: true 

に設定してあるした後

<VVSFeatures /> 

を示す負荷に

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> 
    ) 
    } 
} 

：

コードを反応させもう一度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> 
    ) 
    } 
}