Debo cambiar el ancho de una barra lateral usando la biblioteca de componentes con estilo en el proyecto React.
Aquí está el código en el componente de clase:
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> [...] `; Al hacer clic en el botón al final, me gustaría una función hideSidebar para cambiar el ancho de 200px a 70px. Usualmente uso ganchos para hacer esto, pero mi cliente solo tiene componentes de clase.
Alguien me puede ayudar en esto ? Muchísimas gracias
agregue accesorios a sus etiquetas con estilo
https://styled-components.com/docs/basics#passed-props en su caso sería algo así como
const Somestyled= styled.input` padding: 0.5em; margin: 0.5em; width: ${props => props.somethinghere}; background: papayawhip; border: none; border-radius: 3px; `;y úsalo parece
<Somestyled somethinghere={yourVariableHere} />Oye, el código tenía algunos errores, así que corregí la sintaxis y creé este pequeño código rápido. No voy a explicar todo lo que arreglé, pero diré que observes tu sintaxis. ¡Puede lograr esto de manera bastante simple en JSX y no tener que usar CSS en absoluto!
Debe convertir su componente en uno funcional, ya que es la convención en estos días. Pero independientemente, debe mover la lógica de ocultar el componente en el componente mismo. En el ejemplo, uso React.useState() para alternar un valor booleano y ocultar el componente. También puede utilizar la gestión de estado de componente de clase clásica para hacer esto. También puse un ejemplo para mostrarlo también. ;) Buena suerte
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> ); }Y en un componente de clase:
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> ); } }Puedes intentar hacer esto
//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> [...] `;Si desea manejar todos los estilos en el componente con estilo, puede agregar un nuevo atributo en un componente
<SidebarStyled isShow={this.state.sidebarShow} > .... </SidebarStyled>Y en componente
let SidebarStyled = styled.div` width: 200px; position: fixed; left: ${props=>props.isShow ? '0px': '-250px'}; ... `Funcionará para ti.