Question

我有一个react组件，并且我想在其中使用似乎不起作用的三元运算符显示一个子组件

这是我的相同代码

import React, {Component} from 'react'
// import HeaderProduct from '../components/header_product.co;ntroller';
import HeaderProduct from './../../../components/header_product.controller';
import FooterController from './../../../components/footer.controller.js';
import  './../../../../css/PandC/customerPolicies.css';
import ImageComponent from "./../imageComponent";
import SandD from "./CPC/SandD.js";
import InShipping from './CPC/Inshipping.js';
import Payments from './CPC/Payments.js';      



class customerPolicies extends Component{

    state = {
        SandD: true,
        Cancellation: false,
        Payments: false,
        EandR: false,
        InternationalShipping: false,
        ExpressDelievery: false
    }

    contentToDisplay = (event) => {
        Object.keys(this.state).forEach(key => {
           if(event.target.name == key) {
              this.setState({[event.target.name]: true})
           } else {
               this.setState({[key]: false})   
           }
        })

    }

    render(){

        return(
               <div className="main-class main-container">
               <HeaderProduct />
                <div>
                <ImageComponent />
                </div>
                    <div className="row"> 
                        <div className="sub-headings"> 
                            <button className="btn customer-p-b" name="SandD" onClick={this.contentToDisplay}> Shipping and Delievery </button>
                            <button className="btn customer-p-b" name="Cancellation" onClick={this.contentToDisplay}>Cancellation </button> 
                            <button className="btn customer-p-b" name="Payments" onClick={this.contentToDisplay}>Payments </button>
                            <button className="btn customer-p-b" name="EandR" onClick={this.contentToDisplay}> Exchanges and Returns </button>
                            <button className="btn customer-p-b" name="InternationalShipping" onClick={this.contentToDisplay}> International Shipping </button>
                            <button className="btn customer-p-b" name="ExpressDelievery" onClick={this.contentToDisplay}> Express Delievery </button>
                        </div>
                     <div className="main-content">
                        <div className="header-box">
                         { this.state.SandD ? <SandD /> }

                        </div>
                        <div className="open-box">
                        </div>
                        <div className="close-box">
                        </div>

                    </div>
                </div>
                 <FooterController />
           </div>

        )
    }
}



export default customerPolicies;

如果我的付款状态为true，那么我想显示“付款”子组件。

通过按钮确定的状态，该按钮将所有其他状态设置为false，仅使当前状态为true

<div className="main-content">
    <div className="header-box">
        { this.state.Payments ? <Payments /> }
    </div>

这是我第一次尝试使用三元表达式，由于某种原因，反应在这里抛出错误

{this.state.SandD ? <SandD /> }

[问题：] ？有人可以帮助我进行修复吗？

Answer 1

您的代码中的三元运算符语法不正确。吴会写

 { this.state.SandD ? <SandD />: null }

或者可能只是

 { this.state.SandD && <SandD /> }

Answer 2

选项1：

添加错误的情况： {this.state.SandD ? <SandD /> : undefined }

选项2：

使用&&

{this.state.SandD && <SandD /> }

https://reactjs.org/docs/conditional-rendering.html

Answer 3

由于测试值为假时不显示任何内容，因此请使用&&代替？

为什么JSX中的三元运算符不起作用

3 个答案: