显示组件是否为true，否则显示其他组件（在React中）

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发生（应该再次出现）

它以正确的状态值恢复，但没有任何反应。什么可能是错的？

谢谢！

来源

2016-09-20 AlfredO

你100％肯定的状态是正确的？另外，我不知道你在哪里使用'handleClick'，但'this.setState（{userChoice}）'可能会覆盖你的状态。也许在渲染内部放置一个console.log的状态，这样你就可以在每一点看到它来仔细检查？代码的哪部分将其设置为false？ – ajmajmajma

你怎么知道'它以正确的状态退缩'？你可以在'render（）{'之后做'console.log（'showPriceCalculator：'，this.state.showPriceCalculator）'，让我们知道你看到了正确的值吗？ –

是的，我在渲染方法内注销了状态，当我从ServiceSelector将其设置为true时，我打印出true，并且当我将它从PriceCalculator组件设置为false时，它将打印为false。 – AlfredO

-1

我将值设置为“真”作为参数，即一个字符串不是布尔

来源

2016-09-22 13:53:24 AlfredO

-1

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

你可以只

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

来源

2016-09-20 16:00:13

你好downvoter，你能否解释downvote的原因？ –

我同意，命名是有点关闭。原因是如果我按一个div，它应该只能设置为true，反之亦然。但是这不能帮助父组件不重新渲染组件的问题！（ps，它没有downvote） – AlfredO

我已经为你准备了这里的工作演示：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> 
    ) 
    } 
}

来源

2016-09-20 16:09:39

它与以前的答案一起工作，但感谢您的努力！ – AlfredO

太好了。很高兴你找到了解决方案。 –

显示组件是否为true，否则显示其他组件（在React中）

回答

相关问题