主页 / 问题 / 1576296
Accepted
Neisven
Asked:2024-04-15 20:36:36 +0000 UTC2024-04-15 20:36:36 +0000 UTC

反应。有人可以改进代码吗？

  • 772

你好！我想请您帮忙处理这段代码。

import {
  useState
} from 'react';

import styles from './style/Component.module.css';
export function Dropdown() {
  const [isOpen, setIsOpen] = useState(false)
  
  function toggle() {
    setIsOpen(!isOpen)
  }
  
  return (
    <div>
      <button className{styles.main} onClick={toggle}>On</button>
      {
        isOpen && (
          <div className={styles.dropdown}>
            <ul>
              <li>1 list</li>
              <li>2 list</li>
            </ul>
          </div>
        )
      }
    </div>
  )
}

是否需要改进？如果需要，如何改进？请指教。

reactjs

2 个回答

  1. Best Answer

    没有办法改进你的代码，因为这里没有多余的东西，也没有足够的代码。哦，停下来。您的代码中有错误。这是正确的代码：<button className{styles.main} onClick={toggle}>On</button>。并进一步<ul> {list.map((v,i) => (<li key={i}>{v} list</li>)} </ul>

    • 0

    1. 我会更改处理函数的名称。例如，handleToggle。所以很明显这是一个事件处理程序。

    2. 我还尝试使用箭头函数作为处理函数。在类组件中，这将有助于避免丢失此上下文的问题。

    3. 这就是最好不要改变状态的方式setIsOpen(!isOpen)。在某些情况下，传递给处理程序的 isOpen 状态可能会过时。而且，这里你的下一个状态显然取决于前一个状态。像这样重写它setIsOpen((currentState) => !currentState)。所以你给 React 指令“获取当前状态并反转它”

    • 0

相关问题