样式化组件 Props 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);
};

样式化组件 Props React js

Styled Components Props React js

reactjs

styled-components