Reactjs 样式化组件道具

我将属性传递给我的样式化组件。基本上，我通过了他的身高，从

400px

开始

当我点击一个按钮时，它会转到

30px

，但我做

div

的方式从

400px

开始，当我点击按钮时，它会转到

30px

，然后不再扩展高度大小：

export default function Menu() {
    const [open, setOpen] = useState(true); // declare new state variable "open" with setter
    const handleClick = e => {
      e.preventDefault();
      setOpen(false);
    };
    return (
      <DivMenuButton height={open ? '400px' : '30px'}>
        <button
          style={{ margin:0, padding: 0, height: "30px", width: "100%", borderRadius:'0px' }}
          onClick={handleClick}
        >
          Button
        </button>
      </DivMenuButton>  
    );
}

代码：

---

您的代码实际上是正确的（几乎正确）

道具和样式化的组件是正确的

你做错了一件事，那就是你总是在点击按钮时将open设置为false，而不是将其设置为与之前相反的值

因此，与其这样做，不如：

const handleClick = e => {
  e.preventDefault();
  setOpen(false);
};

您应该这样做：

const handleClick = e => {
  e.preventDefault();
  setOpen(!open);
};

---

它工作了，但我有点困惑，我宣布我的状态是真实的，当你点击我设置为假，这是不正确的吗？@ MykonSpt回答你的第一个评论：考虑一下：如果你把状态设置为假每次点击它，它永远不会成为真实的。您需要将其设置为与以前相反的状态

const handleClick = e => {
  e.preventDefault();
  setOpen(!open);
};