0
288
Views¿Cómo cambiar el componente que se muestra con React y CSS?
Tengo una página compuesta con múltiples componentes. Al igual que en la imagen, quiero mostrar el Componente B dentro del Componente A. De forma predeterminada, al hacer clic en A, oculta B y muestra C en el medio. Después de hacer clic nuevamente, cambia para mostrar B y ocultar C.
Cuando se haya mostrado C, cambie también el color del borde de la A.
import React from "react"; import styled, { css } from "styled-components"; import { ComponentA, ComponentB, ComponentC, } from "~/components"; export const NewComponent: React.FC = ({ }) => { return ( <> <ComponentA> <ComponentB>B</ComponentB> <ComponentC>C</ComponentC> </ComponentA> </> ); }; const ComponentA = styled()` ${({ theme }) => css` &:active { border-color: green; bordor: 1px solid; } `} `; Traté de usar CSS para controlar el color del borde, funciona con background-color pero no funciona con border-color . Además, no estoy seguro de si CSS puede controlar la visualización entre el componente B y el componente C.
3 answers
Answer question0
import {useState} from "react"; import { ComponentA, ComponentB, ComponentC, } from "./components"; export const NewComponent: React.FC = ({ }) => { const [isShowing, setIsShowing] = useState<boolean>(true); const toggle = () => { setIsShowing(current => !current); }; return ( <> <ComponentA> <div> <button onClick={toggle}>Toggle</button> {isShowing && <ComponentB>B</ComponentB>} // if true {!isShowing && <ComponentC>C</ComponentC>} // if false </div> </ComponentA> </> ) }0
- bordor - lo escribiste mal. es frontera
- Cuando establece el borde: 1px sólido; luego borde-color: inicial
Puede configurar CSS: borde: 1px verde sólido;
0
Para cambiar los componentes, debe usar el gancho useState con un estado booleano. Luego agregue un evento onClick en el ComponentA y puede alternar el estado con el gancho.
De esta manera, puede manejar el cambio de color del borde. Cree un atributo para ComponentA (puede elegir el nombre usted mismo), puede pasar valores como accesorios y usar el Operador Ternario para alternar el color.
PD: si no usa mecanografiado, puede eliminar esta línea <{ color: "green" | "white" }> para ComponentA .
import { useState } from "react"; import styled from "styled-components"; export const ComponentA = styled.div<{ color: "green" | "white" }>` padding: 3rem 7rem; border: 2px solid ${(props) => props.color}; border-radius: 0.5rem; `; const DefaultStyle = styled.div` max-width: 300px; padding: 3rem; border-radius: 0.5rem; `; export const ComponentB = styled(DefaultStyle)` background-color: magenta; `; export const ComponentC = styled(DefaultStyle)` background-color: orange; `; export default function App() { const [isActive, setIsActive] = useState(false); const toggle = () => setIsActive(!isActive); return ( <div className="App"> <ComponentA color={isActive ? "green" : "white"} onClick={toggle}> {isActive ? ( <ComponentC>Component C</ComponentC> ) : ( <ComponentB>Component B</ComponentB> )} </ComponentA> </div> ); } 