Question

我将一个属性传递给样式化的组件。基本上我可以通过他以400px开头的身高。

当我单击按钮时，它将转到30px，但是我做div的方式是从400px开始的，当我单击按钮时，它将转到{{1} }，然后不再扩大高度大小：

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>  
    );
}

代码： https://codesandbox.io/s/beautiful-nightingale-fsm58

Answer 1

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

道具和样式组成部分正确。

您做错的是，单击按钮时始终将open设置为false，而不是将其设置为以前的相反。

所以，不要这样做：

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

您应该这样做：

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

样式化的组件支持React js

1 个答案: