Question

我正在使用React。我刚刚开始，在javascript的语法上有一些知识差距。我不知道如何正确编写代码以切换元素条件，从display: block到display: none。我正在尝试使用三元运算符，但我不知道该怎么做。

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

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

Answer 1

你写的那行不会编译，你使用的三元运算符是错误的：

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表示它不是undefined而是true

Answer 2

更简单的方法是这样。这表示如果showOn为true，则e.style.display为阻塞状态，否则e.style.display为false。

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

Answer 3

试试这个

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

或

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

Answer 4

在react中，你有状态来存储组件的属性，在这种情况下，showOn是一个状态。

渲染功能将此状态反映到元素。在这种情况下，如果state showOn为true，则显示你的元素（又名：set display to block），如果没有，你隐藏你的元素（又名：set display to none）

处理事件时，您可以更改此状态。为此，您需要设置showOn =反转当前showOn

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>
    )
}

如何在反应中正确使用三元运算符？

4 个答案: