更改 CSS 样式组件，在 Class 组件中做出反应

Question

我必须使用 React 项目中的 styled-components 库更改边栏的宽度。

这是 Class 组件中的代码：

let SidebarStyled = styled.div`
  width: 200px;
  position: fixed;
  left: 0px;
  top: 0px;
  height: 100vh;
  background-color: #0c1635;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  .showFlexInMobile {
    display: none !important;
  }
  p {
    color: white;
    font-size: 0.85rem;
    text-align: center;
  }
  @media (max-width: 1024px) {
    width: 70px;
    .hideInMobile {
      display: none !important;
    }
    .showFlexInMobile {
      display: flex !important;
    }
    > .link-logo {
      margin-top: 8px;
      > img {
        width: 50px;
      }
    }
  }
`

const hideSidebar = () => {
  // my code
}


class Sidebar extends Component<ISidebar> {
  render() {
    return (
      <SidebarStyled>
        <SidebarHeaderStyled style={{ position: 'relative' }}>
          <button onClick={hideSidebar} className="buttonSideBar">
            -
          </button>
   [...]
`;

点击最后的按钮，我想要一个 hideSidebar 函数来实际将宽度从 200px 更改为 70px。我通常使用钩子来做这件事，但我的客户只有 Class 个组件。

任何人都可以帮助我吗？非常感谢

Answer 1

向您的样式化标签添加道具

https://styled-components.com/docs/basics#passed-props 在您的情况下，它看起来像

const Somestyled= styled.input`
  padding: 0.5em;
  margin: 0.5em;
  width: ${props => props.somethinghere};
  background: papayawhip;
  border: none;
  border-radius: 3px;
`;

并使用它看起来

<Somestyled somethinghere={yourVariableHere} />

Answer 2

嘿，所以代码有一些错误，所以我更正了语法并创建了 this quick little codepen 我不会解释我修复的所有内容，但我会说注意你的语法。您可以在 JSX 中非常简单地实现这一点，根本不必使用 CSS！

您应该将组件转换为功能组件，因为这是当今的惯例。但无论如何，您需要将隐藏组件的逻辑移动到组件本身。在示例中，我使用 React.useState() to toggle a boolean and hide the component. You can also use the classic class component state management 来执行此操作。我也举了例子来展示它。 ;) 祝你好运

const Sidebar = () => {
  const [isShown, setIsShown] = React.useState(true);
  
  const hideSidebar = () => {
    setIsShown(false)
  }

  const showSidebar = () => {
    setIsShown(true)
  }
  return (
    <div>
    {
      isShown &&
      (<SidebarStyled>
      <button onClick={hideSidebar} className="buttonSideBar">
        -
      </button>
    </SidebarStyled>)}
      {!isShown && <button onClick={showSidebar} style={{ width: 50, height: 50, marginLeft: 300}}>
        show
      </button>}
    </div>
  );          
}

并且在 class 组件中：

class Sidebar extends React.Component {
 constructor(props) {
   super(props)
   
   this.state = { isShown: false };
 }
  
 hideSidebar() {
    this.setState({ isShown: false});
 }

  showSidebar() {
    this.setState({ isShown: true});
  }
  
  render() {
    const {
      isShown
    } = this.state;
    
    return (
    <div>
    {
      isShown &&
      (<SidebarStyled>
      <button onClick={() => this.hideSidebar()} className="buttonSideBar">
        -
      </button>
    </SidebarStyled>)}
      {!isShown && <button onClick={() => this.showSidebar()} style={{ width: 50, height: 50, marginLeft: 300}}>
        show
      </button>}
    </div>
  ); 
  }
           
}

Answer 3

你可以试试看

//your styled component

class Sidebar extends Component<ISidebar> {
  constructor( props ){
    super( props );
    this.state = { sidebarShow: true };
    this.hideSidebar = this.hideSidebar .bind(this);
  }

  hideSidebar = () => {
    // your code
    this.setState({
      ...this.state,
      sidebarShow: false
    })
  }
  render() {
    return (
      <SidebarStyled style={{left: `${this.state.sidebarShow ? '0px' : '-250px'}` }}>
        <SidebarHeaderStyled style={{ position: 'relative'}}>
          <button onClick={this.hideSidebar} className="buttonSideBar">
            -
          </button>
   [...]
`;

如果您想处理样式化组件中的所有样式，您可以在组件中添加一个新属性

<SidebarStyled isShow={this.state.sidebarShow} >
....
</SidebarStyled>

在组件上

let SidebarStyled = styled.div`
  width: 200px;
  position: fixed;
  left: ${props=>props.isShow ? '0px': '-250px'};

...

`

它会为你工作。

更改 CSS 样式组件，在 Class 组件中做出反应

Change CSS of styled-components with react in Class components

javascript

css

reactjs

styled-components