样式化组件道具 React js

Question

我将一个属性传递给我的样式化组件。基本上我通过了他以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>  
    );
}

我的样式化组件：

import React from 'react';
import styled from 'styled-components';

export const DivMenuButton = styled.div`
    border: 0px;
    background-color: #000; // was wrong syntax
    width: 200px;
    height: ${props => props.height}
`;

代码： 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);
};