La guía o código que verás en este artículo es la resolución más fácil y efectiva que encontramos a tus dudas o problema.
Solución:
Creo que onMouseEnter y onMouseLeave son los caminos a seguir, pero no veo la necesidad de un componente contenedor adicional. Así es como lo implementé:
var Link = React.createClass({
getInitialState: function()
return hover: false
,
toggleHover: function()
this.setState(hover: !this.state.hover)
,
render: function()
var linkStyle;
if (this.state.hover)
linkStyle = backgroundColor: 'red'
else
linkStyle = backgroundColor: 'blue'
return(
)
A continuación, puede utilizar el estado de desplazamiento (true/false) para cambiar el estilo del enlace.
Tarde para la fiesta pero vengo con solución. Puede usar “&” para definir estilos para hover nth Child, etc.:
day:
display: "flex",
flex: "1",
justifyContent: "center",
alignItems: "center",
width: "50px",
height: "50px",
transition: "all 0.2s",
borderLeft: "solid 1px #cccccc",
"&:hover":
background: "#efefef"
,
"&:last-child":
borderRight: "solid 1px #cccccc"
,
Estoy en la misma situación. Realmente me gusta el patrón de mantener el estilo en los componentes, pero los estados flotantes parecen ser el último obstáculo.
Lo que hice fue escribir un mixin que puede agregar a su componente que necesita estados de desplazamiento. Este mixin agregará un nuevo hovered propiedad al estado de su componente. se establecerá en true si el usuario se desplaza sobre el nodo DOM principal del componente y lo vuelve a establecer en false si los usuarios abandonan el elemento.
Ahora, en la función de representación de su componente, puede hacer algo como:
Ahora cada vez que el estado de la hovered cambios de estado que el componente volverá a representar.
También creé un repositorio de sandbox para esto que uso para probar algunos de estos patrones yo mismo. Échale un vistazo si quieres ver un ejemplo de mi implementación.
https://github.com/Sitebase/cssinjs/tree/feature-interaction-mixin
Si te gustó nuestro trabajo, eres capaz de dejar una crónica acerca de qué le añadirías a esta reseña.