在基於 class 的組件 ReactJS 的渲染中編寫 Javascript 代碼

Question

我正在嘗試在基於 class 的組件的渲染方法中編寫 javascript if..else 語句，但出現了一個我無法診斷的錯誤。

import React, { Component } from 'react';
import Slider from 'react-input-slider';

class RangSlider extends Component {
    state = {
        x: 0.3,
    };
    render() {
        return (
            <React.Fragment>
                <div>{'x: ' + this.state.x}</div>
                <Slider
                    axis='x'
                    xstep={0.1}
                    xmin={0}
                    xmax={1}
                    x={this.state.x}
                    onChange={({ x }) => this.setState({ x: parseFloat(x.toFixed(2)) })}
                />
                <div>{
                    {if(this.state.x===0.8){
                        <p>Yes it is done</p>
                    }}
                </div>
            </React.Fragment>
        );
    }
}

export default RangSlider;

Answer 1

使用三元運算符：

 {this.state.x===0.8 ? <p>Yes it is done</p> : ""}

或者，如果您想跳過其他部分：

{this.state.x===0.8 && <p>Yes it is done</p>}

Answer 2

你必須使用三元：

{this.state.x === 0.8? <p>Yes it is done</p> : null}