使用React.js在if語句中將變量值作為條件傳遞

Question

我是一名學生，我正在嘗試使用React.js進行電子商務作業的購物車摘要，以進行作業。 我需要根據所選的單選按鈕設置運輸成本（運輸成本有兩個選擇：第一個是免費的 ，第二個是$ 20 ），但是我無法做到。 我認為使用if語句可以實現正確的方法，但是我不確定。 有人可以指導我如何實現這一目標嗎？

這是按鈕所在頁面的代碼：

        import React, {Component} from 'react';
        import {Col, Row, Button, Form, Card} from 'react-bootstrap';
        import {Link} from 'react-router-dom';
        import '../styles/shopping.css';
        import Header from '../components/header';
        import Foot from "../components/foot";
        import Summary from '../components/summary';

        class Shipping extends Component{    
            constructor(props) {
                super(props);
                this.state = {
                    activeIndex: ''
                };        
                this.radioButtons = [            
                    {text: 'Free Shipping \n\r Between 2 - 5 working days'},
                    {text: 'Next Day Delivery - $20 \n\r 24 hours from checkout'} 
                    ]
                }      
                updateRadioGroup(i) {
                  this.setState({activeIndex: i})
                }        
            render(){
                let { activeIndex } = this.state;     
                return(
                                <Row>
                                    <Col xs={6} id="ship-sx">
                                    {
                                    this.radioButtons.map((element,i ) => (
                                        <Card className="btn-shipping" class="boxClickCss" key={i} className={activeIndex === i ? 'btn-shipping actv' : 'btn-shipping'}>
                                            <Row>
                                                <Col xs={2} className="center-radio">
                                                    <label className="container-btn-radio">
                                                        <input required type="radio" name="ship" onClick={() => this.updateRadioGroup(i)}/>
                                                        <span className="checkradio"/>
                                                    </label>
                                                </Col>                                        
                                                <Col xs={10}>
                                                    <div style={{maxWidth:"55%"}}>{element.text}</div>
                                                </Col>
                                            </Row>
                                        </Card>
                                    ))
                                    }
                                    </Col>
                                    <Col xs={12} md={4}>
                                        <Summary/>
                                    </Col>
                                </Row>

            )
        }
    }
    export default Shipping;

這是頁面中包含的組件，在其中必須可視化運費：

import React from 'react';
import {Col, Row, Accordion, Dropdown, Button} from 'react-bootstrap';
import Coupon from "./coupon";
import SummaryProd from "./summaryProd";
import '../styles/summary.css';

function somma() {
    var z = (localStorage.getItem('price') +20 +20);
    return z;
}
var risultato = somma();

export const  showProduct=()=>{        
    localStorage.getItem('name');
    localStorage.getItem('price');
    localStorage.getItem('description');
    localStorage.getItem('img');
}
export const Summary = () => (             
    (localStorage.getItem('id') !== null) ? ( 
        <>
        <Row>
            <Col id="summary-col">
                <div>
                    <h3>Summary</h3>
                        <hr className='row-shopping'/>
                    </div>                                 
                    <SummaryProd/>
                    <Coupon/>
                    <hr className='row-shopping'/>
                    <div>
                    <Accordion defaultActiveKey="0">
                        <Accordion.Toggle id="btn-voucher" as={Button} variant="link" eventKey="1" split>
                            <span>HAVE A VOUCHER?</span><Dropdown.Toggle id="voucher-arrow"/>
                        </Accordion.Toggle>                        
                        <Accordion.Collapse eventKey="1">
                        <input/>
                        </Accordion.Collapse>
                    </Accordion>
                    </div>
                    <hr className='row-shopping'/>
                    <div className="summary-details">
                        <span>
                            SUBTOTAL
                        </span>
                        <span>
                            ${localStorage.getItem('price')}
                        </span>
                    </div>
                    <div className="summary-details">
                        <span>
                            SHIPPING
                        </span>
                        <span>
                            {/* SHIPPiNG COST */}
                        </span>
                    </div>
                    <div className="summary-details">
                        <span>
                            TAXES
                        </span>
                        <span>
                            $20
                        </span>
                    </div>
                    <hr className='row-shopping'/>
                    <div className="summary-details">
                        <span>
                            TOTAL
                        </span>

                        <span>

                        </span>
                    </div>
                </Col>
            </Row>
            </>
        ):(
        <Row style={{height: '50vh'}}>
            <Col id="summary-col">
                <div >
                    <h3>Summary</h3>
                    <hr className='row-shopping'/>
                    <span>Your cart is empty!</span>
                </div>
            </Col>
        </Row>           
    )               
)

export default Summary;

Answer 1

你可以這樣做，

constructor(props) {
    super(props);
    this.state = {
        activeIndex: '',
        shippingCost: '',
    };  
    //set cost here only      
    this.radioButtons = [            
        {text: 'Free Shipping \n\r Between 2 - 5 working days', cost: 'Free'},
        {text: 'Next Day Delivery - $20 \n\r 24 hours from checkout', cost: '$20'} 
    ]
}      
updateRadioGroup(i) {
    let shippingCost = this.radioButtons[i].cost;
    this.setState({activeIndex: i, shippingCost }) //set shippingCost in state
}        

設置運費后，您需要將其傳遞給Summary組件，

<Summary shippingCost={this.state.shippingCost} /> 

Summary組件中的用法，

export const Summary = (props) => (   //your props passed 
 ...
 <div className="summary-details">
    <span>
       SHIPPING
    </span>
    <span>
       {props.shippingCost}
    </span>
</div>
...
)

演示代碼減少。