如果 'true' 则显示组件，否则显示其他组件（在 React 中）

Question

我试图在 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，没有任何反应（应该再次出现）

它以正确的状态值重新呈现，但没有任何反应。有什么问题吗？

谢谢！

Answer 1

切换值可以来自 ServiceSelector 组件或 PriceCalculator，我认为这会导致不一致的结果。考虑 ServiceSelector 调用 this.props.toggleDiv(true) 然后 PriceCalculator 组件也调用 this.props.toggleDiv(true) 的情况。你实际上并没有切换。控制状态分散在不同的地方。事实上，您不需要从任何这些组件发送任何切换参数。

你可以

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

Answer 2

我在这里为您准备了一个工作演示：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>
    )
  }
}

Answer 3

我将值设置为 'true' 作为参数，即字符串而不是布尔值

如果 'true' 则显示组件，否则显示其他组件（在 React 中）

Show component if 'true', else show other component (in React)

html

state

show

hide

reactjs