Question

我正在尝试使用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的状态，但是我想我会首先跨过这座桥。

Answer 1

您可以只使用三元运算符，并在运算符条件下对照状态检查a，然后根据状态返回所需的div：

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

Answer 2

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

在ParentElementMenuHeader组件内部，您可以定义类似

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

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

2 个答案: