如果为“真”则显示组件，否则显示其他组件（在 React 中）

Posted 2023-02-22

【中文标题】如果为“真”则显示组件，否则显示其他组件（在 React 中）

【英文标题】：Show component if 'true', else show other component (in React)

【发布时间】：2017-01-28 14:31:01

【问题描述】：

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

它使用正确的状态值重新渲染，但没有任何反应。 有什么问题？

谢谢！

【问题讨论】：

你100%确定状态是正确的吗？另外，我不知道您在哪里使用 handleClick 但 this.setState( userChoice ) 可能会覆盖您的状态。也许在渲染中放置一个状态的console.log，这样你就可以在每个点看到它以进行仔细检查？将其设置回 false 的代码部分在哪里？

你怎么知道It rerenders with the right state？你能在render() 之后做console.log('showPriceCalculator: ',this.state.showPriceCalculator) 并告诉我们你是否看到了正确的值吗？

是的，我在渲染方法中注销了状态，当我从 ServiceSelector 将其设置为 true 时打印了 true，当我从 PriceCalculator 组件将其设置为 false 时打印了 false。

你确定它是布尔真/假而不是字符串吗？您应该显示将其设置为 false 的代码。正如您在下面 Piotr 的回答中看到的那样，您的逻辑很好，所以您一定是设置错误。

就是这样！非常感谢！

【参考方案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>
    )
  

【讨论】：

它之前的答案有效，但感谢您的努力！

太棒了。很高兴您找到了解决方案。

【参考方案2】：

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

你可以

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

【讨论】：

你好downvoter，你能解释一下downvote的原因吗？

我同意这一点，命名有点偏离。原因是如果我按下一个 div 它应该只能设置为 true，反之亦然。但这无助于父组件不重新渲染组件的问题！ （ps，它没有投反对票）

【参考方案3】：

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