如何使用 React useState Hook 设置显示样式属性

Question

我正在尝试切换元素的显示属性虽然 React 不会抛出错误，但浏览器会抛出错误

下面是我的 React 代码

import React ,{useState} from 'react'
import logo from './language.svg'
import './country.css'
const displayShow = "block !important"
const displayHide = "none !important"
function Country() {
    const [languageSelectDisplay, setlanguageSelectDisplay] = useState(displayHide)

    const toggleLanguageSelect = ()=>{
        return languageSelectDisplay === displayHide ? setlanguageSelectDisplay(displayShow) : setlanguageSelectDisplay(displayHide)

   return(
         <section className="language-options-container" id='language-options-container' 
         style={{display : languageSelectDisplay}}>
       <section />
)

    }

以下是 Firefox 抛出的错误

Error in parsing value for ‘display’.  Declaration dropped.

Answer 1

您可以考虑使用三元，这是当前隐藏元素的正确反应方式：

{showLogin?<section className="language-options-container" id='language-options-container'/>:null}

const mycomp = () => {
    const [showLogin, setShowLogin] = React.useState(false);
    
    const onClick = () => setShowLogin(!showLogin)
    
    return(<div id={"main"}>
{showLogin?<section className="language-options-container" id='language-options-container' />:null}</div>);

}

ReactDOM.render(<mycomp/>, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

如何使用 React useState Hook 设置显示样式属性

How To Set Display Style Property Using React useState Hook

html

javascript

css

firefox

reactjs

下面是我的 React 代码

以下是 Firefox 抛出的错误

如何使用 React useState Hook 设置显示样式 属性

How To Set Display Style Property Using React useState Hook

html

javascript

css

firefox

reactjs

下面是我的 React 代码

以下是 Firefox 抛出的错误

如何使用 React useState Hook 设置显示样式属性