如何在 useState 挂钩的帮助下通过单击组件来更改样式组件样式？

发布于 2025-01-11 21:46:14 字数 631 浏览 0 评论 0原文

我想通过单击来更改 StyledDivGrid 组件的宽度，但是使用此代码，当我单击此 div 时没有任何反应。我无法意识到问题是什么。请帮忙

const StyledDivGrid = styled.div`
  display:flex;
  flex-wrap: wrap;
  width: ${props=>props.width};
  height: 120px;
  position: relative;
  background-color: lightcoral;
`
function App() {
  let [state, setState] = useState(
    <StyledDivGrid width = {'120px'}></StyledDivGrid>
  )
  setState = () => {
      <StyledDivGrid width = {'240px'}></StyledDivGrid>;
  }
  
  return (
  
      <StyledDivGrid onClick = {() => setState()}>
        
      </StyledDivGrid>  
    
  );
}

原文

I want to change width of the StyledDivGrid component by clicking on it, but using this code, when I click on this div nothing happens. I can't realize what the problem is.
Help, pls

const StyledDivGrid = styled.div`
  display:flex;
  flex-wrap: wrap;
  width: ${props=>props.width};
  height: 120px;
  position: relative;
  background-color: lightcoral;
`
function App() {
  let [state, setState] = useState(
    <StyledDivGrid width = {'120px'}></StyledDivGrid>
  )
  setState = () => {
      <StyledDivGrid width = {'240px'}></StyledDivGrid>;
  }
  
  return (
  
      <StyledDivGrid onClick = {() => setState()}>
        
      </StyledDivGrid>  
    
  );
}

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

挽清梦 2025-01-18 21:46:14

const StyledDivGrid = styled.div`
   display:flex;
   flex-wrap: wrap;
   width: ${props=>props.width};
   height: 120px;
   position: relative;
   background-color: lightcoral;
`
function App() {
  const [width, setWidth] = useState("120px")
   
  return (

  <StyledDivGrid onClick={ () => setWidth("240px")} width={width}>
    
  </StyledDivGrid>  

  );
}

没有检查代码，我猜你正在使用 styled-components ，我希望这有用

const StyledDivGrid = styled.div`
   display:flex;
   flex-wrap: wrap;
   width: ${props=>props.width};
   height: 120px;
   position: relative;
   background-color: lightcoral;
`
function App() {
  const [width, setWidth] = useState("120px")
   
  return (

  <StyledDivGrid onClick={ () => setWidth("240px")} width={width}>
    
  </StyledDivGrid>  

  );
}

Didn't check the code and I guess you are using styled-components , i hope this is useful

回复收藏 0 原文

~没有更多了~