Tengo una barra lateral simple donde uso transiciones para abrir/cerrar la barra lateral.
Las transiciones funcionan cuando llamo a mi componente Sidebar como una función (sidebar 1 en el ejemplo) .
Las transiciones no funcionan cuando uso el componente Sidebar como componente (sidebar 2 en el ejemplo) .
¿Por qué no funcionan en el ejemplo 2?
const App = (props) => {
const [sidebarCollapsed, setSidebarCollapsed] = React.useState(false);
const Sidebar = ({ bg, ...props }) => {
const width = sidebarCollapsed ? "0px" : "200px";
return (
<div
style={{
backgroundColor: bg,
height: "100px",
width: width,
transitionDuration: "500ms"
}}
/>
);
};
return (
<div>
<div>
{/* Sidebar 1 -> function */}
{Sidebar({ bg: "blue" })}
{/* Sidebar 2 -> component */}
<Sidebar bg="red" />
<button onClick={() => setSidebarCollapsed(!sidebarCollapsed)}>
Toggle sidebar
</button>
</div>
</div>
);
};
ReactDOM.render(<App />, document.getElementById("root"));
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root"></div>
Así funciona el DOM de React, si quieres animarlo, tienes que pasar el prop de lo abierto. Cuando intente pasar un estado de un componente a otro, siempre debe hacerlo a través de los accesorios.
const Sidebar = ({ bg, open, ...props }) => {
const width = open ? "0px" : "200px";
return (
<div
style={{
backgroundColor: bg,
height: "100px",
width: width,
transitionDuration: "500ms"
}}
/>
);
};
const App = (props) => {
const [sidebarCollapsed, setSidebarCollapsed] = React.useState(false);
return (
<div>
<div>
{/* Sidebar 1 -> function */}
{Sidebar({ bg: "blue", open: sidebarCollapsed })}
{/* Sidebar 2 -> component */}
<Sidebar bg="red" open={sidebarCollapsed}/>
<button onClick={() => setSidebarCollapsed(!sidebarCollapsed)}>
Toggle sidebar
</button>
</div>
</div>
);
};
ReactDOM.render(<App />, document.getElementById("root")); <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root"></div>