React Js 按钮切换/样式化组件

Posted 2023-03-15

【中文标题】React Js 按钮切换/样式化组件

【英文标题】：React Js Button Toggle/ Styled Components

【发布时间】：2020-04-17 14:22:39

【问题描述】：

我的风格 从“反应”导入反应； 从“样式组件”导入样式；

export const DivMenuButton = styled.div`
    border: 0px;
    backgroundColor: #000;
    height: 400px;
    width: 200px;
`;

我的回报：

import  DivMenuButton  from './styles';

export default function Menu() 
    const [open, setOpen] = useState(0); 
    const handleClick = e => 
      e.preventDefault();
      setOpen(!open);
    ;
    return (
      <DivMenuButton>
        <Button
          style= margin:0, padding: 0, height: "30px", width: "100%", borderRadius:'0px' 
          onClick=handleClick
        >
          Button
        </Button>
      </DivMenuButton>  
    );

我还想知道如何做到以下几点：

我有一个开放状态

我的 div 将从 400 像素开始 单击按钮将获得 30px 但我不知道如何使用样式组件来做到这一点

【问题讨论】：

看到这个SO answer

他继续活跃 = 道具活跃 我可以创建任何名称吗？如何打开和支撑打开？

【参考方案1】：

使用样式组件props

试试这个：

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

export default function Menu() 
    const [open, setOpen] = useState(false); 
    const handleClick = e => 
      // e.preventDefault(); no need 
      setOpen(!open);
    ;

    return (
      <DivMenuButton width=open ? '30px' : '400px'>
        <button
          style= margin:0, padding: 0, height: "30px", width: "100%", borderRadius:'0px' 
          onClick=handleClick
        >
          Button
        </button>
      </DivMenuButton>   
    );

【讨论】：

你好，当我点击我的按钮时，div 将继续使用相同的道具并且不会改变。例如，她从 400 高度开始，我点击一个按钮，她会转到 40px

对不起，我不明白，你能解释更多吗？主要问题是关于改变 div 的宽度而不是高度？