Javascript 如何正确使用react js中的三元运算符？

我在用React。我最近刚开始学习，在javascript语法方面有一些知识差距。我不知道如何正确编写代码以切换元素条件，从

display:block

到

display:none

。我想用三元运算符，但我不知道怎么做

 toggleFilters = (e) => {
    this.state.showOn === true ? {e.style.display ? 'block' : 'none'}

    this.setState({
        showOn: !this.state.showOn,
    })
}

试试这个

{e.style.display  = this.state.showOn === true ? 'block' : 'none'}

或

---

三元运算符通常与赋值有关。例如，如果我们有以下代码位：

let a = 'foo';
let conditionA = false;

if ( conditionA ) {
    a = 'bar';
} else {
    a = 'baz';
}

您可以想象三元运算符将基于一个条件隐式返回一个值。在这种情况下，如果

conditionA

为

true

，则需要

a

的值为

bar

，否则，

baz

。你可以看到我们正在处理任务。实现这一点的方法是：

...
a = ( conditionA ) ? 'bar' : 'baz';
...

然而，在这种情况下，您需要事先定义

条件a

三值运算的基本语法为：

variable = ( condition ) ? valueIfTrue : valueIfFalse;

在您的具体情况下，您可以选择以下选项：

e.style.display = ( this.state.showOn ) ? 'block' : 'none';

---

正如您可以推断的那样，我们遵循我们提到的语法

您编写的行无法编译，您使用的三元运算符在以下方面有错误：

this.state.showOn === true ? {e.style.display ? 'block' : 'none'}

因为

：

在

{}

块之后是预期的，并且您没有在那里执行任何赋值，所以应该是这样的：

e.style.display = this.state.showOn ? 'block' : 'none';

注意：

---

请注意，

this.state.showOn===true

可以缩短为

this.state.showOn

，因为

this.state.showOn

意味着它不是

未定义的

，它是

true
在react中，您有状态来存储组件的属性，在这种情况下，
showow
是一种状态

渲染函数将此状态反映到元素。在这种情况下，如果state shown为true，则显示元素（aka:set display to
block
），否则隐藏元素（aka:set display to
none
）

处理事件时，您将更改此状态。为此，您将
shown
=当前
shown的反转设置为

toggleFilter = (event) => { 
    this.setState ({
        showOn: !this.state.showOn
    })
}

在“渲染”函数中，将此更改反映到元素中，现在可以使用三元运算符

render() {
    return (
        <div>
            <div style={({display: this.state.showOn ? 'block' : 'none'})}> 
                Show Me
            </div>
            <button onClick={toggleFilter}>Toggle Filter</button>
    )
}

render（）{
返回(
向我展示
切换过滤器
)
}
更简单的方法是这样做。
这表示如果shownOn为true，则e.style.display为block，否则e.style.display为false

e.style.display = this.state.showOn ? 'block' : 'none'}

this.state.showOn==true？{e.style.display？'block'：'none'}
->
e.style.display=this.state.shown？'block'：“none”
你是这个意思吗？
e.style.display = this.state.showOn ? 'block' : 'none'}