0
126
VistasCómo obtener accesorios principales en el componente secundario cuando se usa un componente con estilo en reaccionar
Permítanme ilustrar con un ejemplo.
//NavLink: react router component const StyledNavLink = styled(NavLink)` color: red; background: blue; ` function styledLink(label, to) { return <StyledNavLink to={to} className={(props) => console.log(props)} > {label} </StyledNavLink> } Aquí no se imprime nada... Si uso NavLink en lugar de StyledNavLink , obtengo todos los valores de prop en la consola. Entonces, ¿cómo obtener las propiedades de NavLink en el componente StyledNavLink ?
2 Respuestas
Responde la pregunta0
Tema
La propiedad className del componente NavLink está en conflicto con la propiedad className utilizada por styled-components . El componente con styled(NavLink) solo tendrá una propiedad de nombre de clase en forma de cadena, mientras que el componente className puede tomar un valor de nombre de NavLink de función o className .
Solución
Pase la NavLink className bajo una propiedad diferente y maneje la lógica condicional en el componente con estilo.
Ejemplo:
const StyledNavLink = styled(({ className, navLinkClassName, ...props }) => ( <NavLink {...props} className={(props) => { let extraClass = typeof navLinkClassName === "function" ? navLinkClassName(props) : navLinkClassName; return [className, extraClass].filter(Boolean).join(" "); }} /> ))` color: red; background: blue; &.activeLink { color: green; background: lightgreen; } `;Uso:
function styledLink(label, to) { return ( <StyledNavLink to={to} navLinkClassName={(props) => { console.log("styledLink", props); return props.isActive ? "activeLink" : null; }} > {label} </StyledNavLink> ); } ... {styledLink("home", "/")} Si quería que styledLink fuera realmente un componente de React:
function StyledLink({ label, to }) { return ( <StyledNavLink to={to} navLinkClassName={(props) => { console.log("StyledLink", props); return props.isActive ? "activeLink" : null; }} > {label} </StyledNavLink> ); } ... <StyledLink to="/" label="home" /> 
0
Creo que no está pasando los accesorios del padre a su componente con estilo. Debería ser algo así:
const StyledNavLink = styled(NavLink)` color: red; background: blue; `; const Menu = (props) => { const { label, to } = props; return <StyledNavLink to={to}>{label}</StyledNavLink>; };