Así que he estado aprendiendo a reaccionar.

Y he estado aprendiendo sobre estados / accesorios y cosas que cambian dinámicamente. Como tal, configuré los estados configurados en un componente como tal:

  constructor(props) {
    super(props);
    this.modifyStyle = this.modifyStyle.bind(this);
    this.state = {
      navigation: [
        { route: "/", title: "Home" },
        { route: "/about", title: "About Me" },
        { route: "/portfolio", title: "Portfolio" },
        { route: "/contact", title: "Contact" },
        { route: "/", title: "Services" },
      ],
      styling: "nav",
    };
  }

Observe el estado "Estilo".

Esto se usa para darle al elemento de lista estilo como tal:

render() {
return (
  <div>
    <div className="trigram">
      <p>&#x2630;</p>
    </div>
    <ul className={this.state.styling}>
      {this.state.navigation.map((items) => (
        <NavItem route={items.route} title={items.title} />
      ))}
    </ul>
  </div>
);

El CSS para el estado "Estilo" es este:

   .nav {
  width: 100%;
  float: left;
  list-style: none;
  padding: 15px;
  transition: 1s;
   }

Lo que produce, junto con el estilo li relevante, lo siguiente en la página web:

[! [Captura de pantalla del menú] [1]] [1]

La idea es usar la siguiente función para cambiar el estilo de la lista a uno más pequeño en un evento "Scroll":

  componentDidMount() {
    document.addEventListener("scroll", this.modifyStyle, true);
  }
  modifyStyle = () => {
    this.setState({
      styling: "nav2",
    });
  };

El estilo "nav2" que se está asignando al estado debe ser idéntico al estilo del menú principal pero con un relleno reducido.

.nav2 {
  width: 100%;
  float: left;
  list-style: none;
  padding: 5px;
  transition: 1s;
}

Se llama a la función y todo funciona según lo previsto. Se cambia el estilo. Sin embargo, por alguna razón, el estilo actualizado se rompe por completo y queda atascado con este aspecto:

[! [problema de captura de pantalla] [2]] [2]

No tengo idea de por qué está sucediendo esto y parece que ninguna depuración del CSS resolverá el problema. El estilo simplemente no jugará aquí.

Espero que esto tenga algo que ver con la forma en que React maneja los estados, pero no estoy realmente seguro. Cualquier ayuda será muy apreciada.

TIA [1]: https://i.stack.imgur.com/bK1dt.png [2]: https://i.stack.imgur.com/w7Wh2.png

1
Fergus 26 ago. 2020 a las 15:11

1 respuesta

La mejor respuesta

No es una pregunta de reacción, era CSS.

Problema resuelto generalizando la etiqueta "li" css. No especificarlo con respecto a una clase específica

1
Fergus 26 ago. 2020 a las 12:33