Im试图显示React中的一个或另一个组件。点击时我可以显示一个组件,但我无法显示其他组件。显示组件是否为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发生(应该再次出现)
它以正确的状态值恢复,但没有任何反应。 什么可能是错的?
谢谢!
你100%肯定的状态是正确的?另外,我不知道你在哪里使用'handleClick',但'this.setState({userChoice})'可能会覆盖你的状态。也许在渲染内部放置一个console.log的状态,这样你就可以在每一点看到它来仔细检查?代码的哪部分将其设置为false? – ajmajmajma
你怎么知道'它以正确的状态退缩'?你可以在'render(){'之后做'console.log('showPriceCalculator:',this.state.showPriceCalculator)',让我们知道你看到了正确的值吗? –
是的,我在渲染方法内注销了状态,当我从ServiceSelector将其设置为true时,我打印出true,并且当我将它从PriceCalculator组件设置为false时,它将打印为false。 – AlfredO