在 HTML 中反应三元运算符不呈现正确的 HTML答案

【问题标题】：React ternary operator in HTML not rendering proper HTML在 HTML 中反应三元运算符不呈现正确的 HTML
【发布时间】：2018-05-06 22:37:10
【问题描述】：

我对 React 很陌生，并且对我认为简单的三元运算符有些问题。我只是想默认显示一个减号，点击它时显示一个加号。我在我的 JSX 中编写了一个三元运算符，并将组件的初始状态设置为 false、布尔值，并在单击时切换它。看起来很简单。

不过，默认情况下该页面显示一个加号，我不知道为什么。当我单击它时，它不会改变，并且代码中的 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;

【问题讨论】：

您的代码几乎没有问题。要更新状态，请始终使用 this.setState。
默认是有意义的。 showMinus 为 false，因此第二个 span 以 + 作为文本呈现。如果您想要基于 false 的不同默认值，则您的三元组是向后的

标签： javascript reactjs ternary-operator

【解决方案1】：

Reactjs 是一种函数式编程风格，其理念是保持您的代码不可变。 React 有一种使用setState function 设置状态的方法。您在 this.state.showMinus = !this.state.showMinus; 这一行中所做的事情正在改变您的状态，这不会触发反应中的重新渲染。

将该行代码更改为：this.setState({ showMinus: !this.state.showMinus })，它应该可以工作。

【讨论】：

【解决方案2】：

您的代码几乎没有问题。要更新状态，请始终使用 this.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;

【讨论】：