在 Class 組件中更改樣式組件的 CSS 並作出反應

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 function 實際將寬度從 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

嘿，所以代碼有一些錯誤，所以我更正了語法並創建了這個快速的小代碼筆我不會解釋我修復的所有內容，但我會說注意你的語法。 您可以在 JSX 中非常簡單地實現這一點，而根本不必使用 CSS！

您應該將您的組件轉換為功能組件，因為現在這是慣例。 但無論如何，您需要將隱藏組件的邏輯移動到組件本身。 在示例中，我使用React.useState()切換 boolean 並隱藏組件。 您也可以使用經典的 class 組件 state 管理來執行此操作。 我也舉了例子來展示它。 ;） 祝你好運

 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>
   [...]
`;

如果你想處理樣式組件中的所有 styles 你可以在組件中添加一個新屬性

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

在組件上

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

...

`

它會為你工作。