Reactjs 如何使用useState有条件地渲染？

我试图使用useState有条件地呈现div，但就我个人而言，我不知道该怎么做。我想我很接近，但我看不出我做错了什么，我完全误解了怎么做。我做错了什么？我写了这篇文章，但它不起作用

import React, { useState } from 'react'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faWindowClose } from '@fortawesome/free-solid-svg-icons'

function ElementMenuHeader() {
const [elementMenuOpenClose, setElementMenuOpenClose] = useState(true)
const handleClick = () => setElementMenuOpenClose(false)

return (
    <div id="App-Close-Element-Menu-Container"
    style={{ display: elementMenuOpenClose ? 'block' : 'none'}}
    >
    <button id="App-Close-Element-Menu"
        onClick={() => handleClick }
    >
        <FontAwesomeIcon icon={faWindowClose} />
    </button>
    </div>
);
}

export default ElementMenuHeader

import React，{useState}来自“React”
从“@fortawesome/react fontawesome”导入{FontAwesomeIcon}
从“@fortawesome/free solid svg icons”导入{faWindowClose}
函数元素MenuHeader（）{
常量[elementMenuOpenClose，setElementMenuOpenClose]=useState（true）
const handleClick=（）=>setElementMenuOpenClose（false）
返回(
handleClick}
>
);
}
导出默认元素MenuHeader

---

理想情况下，我也希望能够从其他组件设置

elementMenuOpenClose

的状态，但我想我将首先通过这座桥。

您可以使用三元运算符，并根据运算符条件中的状态检查a，根据状态返回您想要的div：

{(elementMenuOpenClose? <div>some tags A </div>: <div>Some tags B </div>)}

{（elementMenuOpenClose？一些标记A：一些标记B）}

您可能有

ElementMenuHeader

的父组件。 假设这是

ParentElementMenuHeader

在

ParentElementMenuHeader

组件中，您可以定义

const ParentElementMenuHeader = () => {
 const [elementMenuOpenClose, setElementMenuOpenClose] = useState(true);
 ...
 return (
  ...
   {elementMenuOpenClose && (
    <ElementMenuHeader
     setElementMenuOpenClose={setElementMenuOpenClose}
     ...
   />
   )}
  ...
 );
}

constparentelementmenuheader=（）=>{
常量[elementMenuOpenClose，setElementMenuOpenClose]=useState（true）；
...
返回(
...
{elementMenuOpenClose&&(
)}
...
);
}

内部元件主元件

import React, { useState } from 'react'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faWindowClose } from '@fortawesome/free-solid-svg-icons'

function ElementMenuHeader({setElementMenuOpenClose}) {
 const handleClick = () => setElementMenuOpenClose(false)

 return (
     <div id="App-Close-Element-Menu-Container">
      <button id="App-Close-Element-Menu" onClick={handleClick}>
          <FontAwesomeIcon icon={faWindowClose} />
      </button>
     </div>
 );
}

export default ElementMenuHeader

import React，{useState}来自“React”
从“@fortawesome/react fontawesome”导入{FontAwesomeIcon}
从“@fortawesome/free solid svg icons”导入{faWindowClose}
函数ElementMenuHeader（{setElementMenuOpenClose}）{
const handleClick=（）=>setElementMenuOpenClose（false）
返回(
);
}
导出默认元素MenuHeader

onClick={（）=>handleClick}

。这永远不会叫handleClick。你可能是想做

onClick={（）=>handleClick（）}

还是

onClick={handleClick}

？是的，伙计！这就解决了问题。我认为react中的onClick事件必须从常量或变量“引用”，即在函数名末尾不使用

（）

，以防止无限循环。此外，我假设您正在尝试翻转打开/关闭，因此将handleClick更改为

handleClick=（）=>setElementMenuOpenClose（v=>！v）

@SILENT“v”来自哪里？@Marley您需要将函数引用传递到道具中。这告诉react在事件发生时希望调用什么函数。所以

onClick={handleClick}

的意思是“当点击发生时，调用handleClick”

onClick={（）=>handleClick（）}

的意思是“当单击发生时，调用我刚刚创建的函数，该函数的文本是

（）=>handleClick（）