Javascript HTML中的React三元运算符未呈现正确的HTML

我对反应非常陌生，在我认为是一个简单的三元运算符时遇到了一些问题。我只是想在默认情况下显示一个减号，单击时显示一个加号。我在JSX中编写了一个三元运算符，将组件的初始状态设置为false、boolean，并在单击时进行切换。看起来很简单

不过，页面默认显示一个加号，我不知道为什么。当我单击它时，它不会改变，代码中的console.log显示布尔值。有人知道怎么回事吗？提前谢谢。以下是我的组件的代码：

import React, { Component } from 'react';

class Header extends Component {
    constructor(props) {
        super(props);

        this.state = {
            showMinus: false,
        };


        this.changeSign = () => {
            this.state.showMinus = !this.state.showMinus;
            console.log('CLICKED ', this.state.showMinus);
        }
    };

    render() {
        return (
            <div className="header">
                <div>State: {this.state.showMinus}</div>
                <div>30%</div>
                <div>$200000</div>
                <div>85%</div>
                <div>
                    {this.state.showMinus ? <span className="plusOrMinus" onClick={this.changeSign}> - </span>
                        :
                    <span className="plusOrMinus" onClick={this.changeSign}> + </span>}
                </div>
            </div>
        );
    }
}

export default Header;

import React，{Component}来自'React'；
类头扩展组件{
建造师（道具）{
超级（道具）；
此.state={
错,，
};
this.changeSign=（）=>{
this.state.showMinus=！this.state.showMinus；
console.log（'CLICKED'，this.state.showMinus）；
}
};
render（）{
返回(
状态：{this.State.showMinus}
30%
$200000
85%
{this.state.showMinus？-
:
+ }
);
}
}
导出默认标题；

Reactjs是一种函数式编程，其思想是保持代码不变。React有一种使用设置状态的方法。您在这行中所做的

this.state.show负=！this.state.showMinus正在改变您的状态，这不会在react中触发重新加载

将代码行更改为：
this.setState（{showMinus:！this.state.showMinus}）
，它应该可以工作。
Reactjs是一种函数式编程，其目的是保持代码不变。React有一种使用设置状态的方法。您在这行中所做的
this.state.show负=！this.state.showMinus正在改变您的状态，这不会在react中触发重新加载

将该行代码更改为：
this.setState（{showMinus:！this.state.showMinus}）
，它应该可以工作。
您的代码中几乎没有问题。要更新状态，请始终使用此.setState

import React, { Component } from 'react';

    class Header extends Component {
        constructor(props) {
            super(props);

            this.state = {
                showMinus: false,
            };


            changeSign = () => {
                this.setState({ showMinus = !this.state.showMinus })
                console.log('CLICKED ', this.state.showMinus);
            }
        };

        render() {
            return (
                <div className="header">
                    <div>State: {this.state.showMinus}</div>
                    <div>30%</div>
                    <div>$200000</div>
                    <div>85%</div>
                    <div>
                        {this.state.showMinus ?  <span className="plusOrMinus" onClick={this.changeSign}> + </span>
                            : <span className="plusOrMinus" onClick={this.changeSign}> - </span>
                       }
                    </div>
                </div>
            );
        }
    }

    export default Header;

import React，{Component}来自'React'；
类头扩展组件{
建造师（道具）{
超级（道具）；
此.state={
错,，
};
changeSign=（）=>{
this.setState（{showMinus=！this.state.showMinus}）
console.log（'CLICKED'，this.state.showMinus）；
}
};
render（）{
返回(
状态：{this.State.showMinus}
30%
$200000
85%
{this.state.showMinus？+
:  - 
}
);
}
}
导出默认标题；
您的代码中几乎没有问题。要更新状态，请始终使用此.setState

import React, { Component } from 'react';

    class Header extends Component {
        constructor(props) {
            super(props);

            this.state = {
                showMinus: false,
            };


            changeSign = () => {
                this.setState({ showMinus = !this.state.showMinus })
                console.log('CLICKED ', this.state.showMinus);
            }
        };

        render() {
            return (
                <div className="header">
                    <div>State: {this.state.showMinus}</div>
                    <div>30%</div>
                    <div>$200000</div>
                    <div>85%</div>
                    <div>
                        {this.state.showMinus ?  <span className="plusOrMinus" onClick={this.changeSign}> + </span>
                            : <span className="plusOrMinus" onClick={this.changeSign}> - </span>
                       }
                    </div>
                </div>
            );
        }
    }

    export default Header;

import React，{Component}来自'React'；
类头扩展组件{
建造师（道具）{
超级（道具）；
此.state={
错,，
};
changeSign=（）=>{
this.setState（{showMinus=！this.state.showMinus}）
console.log（'CLICKED'，this.state.showMinus）；
}
};
render（）{
返回(
状态：{this.State.showMinus}
30%
$200000
85%
{this.state.showMinus？+
:  - 
}
);
}
}
导出默认标题；
您的代码中几乎没有问题。要更新状态，请始终使用this.setState。默认值有意义
showMinus
为false，因此第二个跨度以
+
作为文本呈现。如果您希望基于
false
使用不同的默认值，那么您的三元代码是向后的，您的代码中几乎没有问题。要更新状态，请始终使用this.setState。默认值有意义
showMinus
为false，因此第二个跨度以
+
作为文本呈现。如果希望基于
false