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

我已经为您准备了一个工作演示：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 2

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

你可以

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

Answer 3

我将值设置为＆＃39; true＆＃39;作为参数，即字符串不是布尔值

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

3 个答案: