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

【问题标题】：How can I use useState to conditionally render?如何使用 useState 有条件地渲染？
【发布时间】：2020-10-16 00:12:53
【问题描述】：

我正在尝试使用 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

理想情况下，我也希望能够从其他组件设置elementMenuOpenClose 的状态，但我想我会先过这座桥。

【问题讨论】：

onClick={() => handleClick }。这永远不会调用handleClick。你可能是打算做onClick={() => handleClick()} 或onClick={handleClick}？
是的，伙计！这解决了问题。我认为 react 中的 onClick 事件必须从 const 或变量中“引用”，即在函数名称末尾没有 () 以防止无限循环。
此外，我假设您正在尝试翻转打开/关闭，因此将 handleClick 更改为 handleClick = () => setElementMenuOpenClose(v => !v)
@SILENT 那个“v”是从哪里来的？
@Marley 您需要将函数引用传递给道具。这告诉反应当事件发生时你想调用什么函数。所以onClick={handleClick} 的意思是“当点击发生时，调用handleClick”。 onClick={() => handleClick()} 表示“当点击发生时，调用我刚刚创建的函数谁的文本是() => handleClick()

标签： reactjs react-hooks setstate

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

您的父组件可能是ElementMenuHeader。假设是ParentElementMenuHeader。

在ParentElementMenuHeader组件内部，可以定义like

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

ElementMenuHeader 组件内部，

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

【讨论】：