Vea con qué facilidad puede crear pestañas de reacción

Foto de Blake Connally en Unsplash

¡La nueva API React Context está oficialmente fuera y es segura de usar!

Puedes seguirme en Twitter o consultar mis últimos artículos en mi sitio yaabed.com. Además, tengo mi publicación en medium blog.yaabed.com.

Esta API se utiliza principalmente para compartir cosas entre los componentes React para resolver el problema de "perforación de accesorios". La exploración de accesorios es el intercambio de accesorios desde los componentes principales a otras partes secundarias de una aplicación, asegurándose de que todo se procese cuando sea necesario. Pero, ¿por qué compartir todos estos accesorios entre elementos cuando puede no ser necesario? Ahí es donde entra el ContextAPI.

La gente a veces se confunde y comienza a usar ContextAPI en todas partes sin necesidad de usarlo. Al igual que las personas comienzan a usar Redux y lo conectan a cada componente del proyecto.

No uses el contexto solo para evitar pasar accesorios unos pocos niveles más abajo. Apéguese a los casos en que se necesita acceder a los mismos datos en muchos componentes en múltiples niveles. - Reaccionar equipo.

Por un tiempo, el nuevo ContextAPI presentado por el equipo react. Entonces, decidí implementar una idea simple usando este nuevo enfoque para obtener más información al respecto. Empiezo a buscar lo que puedo realizar. Luego, después de un tiempo, decido reaccionar pestañas.

Cuando comienzo a implementar el componente único react-tabs, escribí cada paso para lograr el objetivo y convertirlos para este artículo.

"La informática no tiene más que ver con las computadoras que la astronomía con los telescopios". - Edsger Dijkstra

Ejemplo de uso después de finalizar la implementación

Este es el último ejemplo del código después de que termine la implementación de react-tabs usando la API de contexto.

Publiqué este componente en npm y creé un ejemplo de sandbox simple, que muestra cómo usarlo:


   
      
          Esta es la pestaña 1 
      
      
          Esta es la pestaña 2 
      
   

Implementar pestañas de reacción sin el contexto API

Cuando aprenda cosas nuevas, le sugiero que escriba el código tal como lo conoce y luego conviértalo al nuevo estilo que desea aprender. Por ejemplo, si conoce el concepto de componentes compuestos para compartir cosas. Cree un componente primario llamado tabs-parent que contenga el estado de tabulación y contenga métodos para agregar pestañas, eliminar pestañas, pestaña activa, pestaña activa anterior. Luego compártelo entre las cosas. Te mostraré un ejemplo de cómo construir pestañas de reacción usando el patrón de componentes compuestos.

Magic comienza desde el siguiente código en componentes compuestos. Gracias a Kent C. Dodds por su curso sobre los patrones avanzados de componentes React. Además, puede consultar este artículo "Patrones de componentes de reacción avanzada" escrito por él sobre estas cosas.

Cuando utiliza la función de mapa en la propiedad hijos, puede recorrer los elementos dentro de su componente y clonarlos como elementos nuevos y pasar lo que necesite. Este truco tampoco borra las propiedades movidas desde el exterior para estos componentes secundarios, los copia y los fusiona con su estado de componente desde el componente contenedor principal.

{React.Children.map (this.props.children, child =>
  React.cloneElement (hijo, {
    activeTab: this.state.activeTab,
    addTab: this.addTab
  })
)}

Aquí está el entorno limitado de código para la implementación completa:

Ahora es el momento de usar el nuevo ContextAPI

La nueva API de contexto es mucho más sencilla que antes, no es necesario definir varias cosas en el componente principal y el componente secundario para compartir accesorios y estados. Simplemente necesita un proveedor para los valores compartidos, y los consumidores le dan los valores almacenados en el proveedor. Consulte el código de muestra a continuación para mostrar cómo es fácil comenzar a usar ContextAPI.

const initialValue = {
    usuario: {},
    logUserIn: () => {}
};
/ **
* así es como define la API de contexto utilizando reaccionar crea contexto * fábrica esta fábrica contiene el proveedor de contexto y el contexto * consumidor
** /
const UserContext = React.createContext (initialValue);
La aplicación de clase extiende React.Component {
  logUserIn () {// iniciar sesión en el código del usuario}
  render () {
   contexto const = {usuario: this.state.user, logUserIn: this.logUserIn};
    regreso (
      {/ * así es como accede al proveedor. Debe envolver su aplicación con este proveedor o el componente principal superior * /}
       
           
       
    );
  }
}
encabezado de función (accesorios) {
  regreso (
    
       {/ * Aquí se explica cómo usar al consumidor para obtener valores y datos del componente del proveedor * /}                    {contexto =>               context.user.isLoggedIn?                `welcome $ {context.user.name}`:                             }              
  ); }

Implementar pestañas de reacción usando ContextAPI

Es lo mismo que el patrón de componentes compuestos que un padre es responsable de compartir cosas entre los componentes. En ContextAPI llamó al proveedor. Todos los niños dentro del proveedor pueden usar al consumidor para obtener el estado almacenado dentro del proveedor. Es lo mismo que los componentes compuestos que usan clones secundarios con los datos necesarios. Puede verificar el código de muestra a continuación y hacer la comparación entre los dos patrones.

Componente Contexto de pestañas

Este contexto contiene el estado compartido entre el componente Tab y el componente Tabs.

  • Pestañas: Matriz de pestañas para almacenar las pestañas agregadas para representarlas en la parte superior para que un usuario pueda hacer clic en una de ellas y cambiar el estado por sí mismo.
  • Pestaña activa: Objeto para almacenar qué pestaña muestra a un usuario, esta es una entidad requerida para que el componente react-tabs contenga la identificación de la pestaña activa.
  • Agregar pestaña: función que permite que el componente secundario de pestaña se agregue solo cuando está montado.
  • Al hacer clic: Función para cambiar la pestaña activa cuando se hace clic en la nueva pestaña.

Componente de contenedor de pestañas

El siguiente código muestra el componente del contenedor Tab, y simplemente indica cuándo su id es el activo.

All Tabs Container

Si se pregunta por qué estoy usando glamour, creo que usar el enfoque CSS-JS para diseñar los componentes React es algo notable porque tiene el controlador en cualquier cosa y encapsula su elemento consigo mismo. Recomiendo usar glamour para esto porque es flexible en demasiados casos.

Conclusión

Hay demasiados patrones por ahí. Pero asegúrese de elegir qué modo es el adecuado para su caso. Crear componentes reutilizables de la manera correcta es una de las claves para ser un ingeniero frontend. Por lo tanto, no se pegue y comience a codificar sus elementos utilizando los nuevos patrones que se muestran y elija el correcto. Además, no esperes un modo y deja a los demás cosas buenas.

Estoy escribiendo en blog.yaabed.com. Si disfrutaste este artículo, asegúrate de compartirlo con otras personas. Y no olvides presionar el botón de seguir para ver más artículos como este, también sígueme en Twitter.

Hola, mi nombre es Yazan Aabed. Crecido en Palestina. Mi especialidad fue en informática. Soy un ingeniero frontend y amante de JavaScript . Principalmente trabajando con marcos Frontend como (AngularJs, ReactJS). Puedes llamarme #Geek . Además, me gusta compartir mi conocimiento con otras personas y aprender de ellas 🌪. Puedes encontrarme en GitHub, Medium, Twitter.