Cómo componer componentes para crear pestañas en reacción

Vamos a ordenar la estructura básica del componente.

1234567891011121314151617181920classTabsextendsComponent{ state ={ activeTabIndex:0};render(){const{ activeTabIndex }=this.state;const activeTab = props. children{ activeTabIndex];return(<div><divclassName="tabs">{//}</div><divclassName="tab-content">{activeTab. props.children}</div></div>);}}</pre
jsx

En el estado, lleva un registro del índice de pestañas activas para que puedas rastrear cuál de las pestañas está activa en ese momento.

Dentro de la sección de pestañas, haz un bucle a través de los niños y muestra cada título en un . Al hacer clic en el botón de la pestaña, establece el índice como la pestaña activa actual. La sección de contenido de la pestaña mostrará el contenido de la pestaña activa.

…<divclassName="tabs">{props.children. map((tab, i)=>(<buttonclassName="tab-btn"onClick={()=>{setActiveTabIndex(i);}}key={i}>{tab.props.title}</button>))}</div>// …</pre&gt.;
jsx

Ahora, si compruebas el resultado, podrás navegar por las pestañas. Pero no se ve tan bien; no hay manera de que el usuario entienda qué pestaña está actualmente activa. Por lo tanto, tendrás que crear un indicador de pestaña para eso.

…<divclassName="tabs">{props.children. map((tab, i)=>(<buttonclassName="tab-btn"onClick={()=>{setActiveTabIndex(i);}}key={i}>{tab.props. title}</button>))}</div><divclassName="tab-indicator-container"><divclassName="tab-indicator"style={{{{ancho:100/ props.children. longitud+&cuota;%&cuota;, transform:`translateX(${activeTabIndex *100}%)`}}/></div><divclassName=&cuota;tab-indicador&cuota;>{activeTab.props.children}</div>// …</pre&gt..;
jsx

Utilice la propiedad de transformación para deslizar el indicador a la pestaña actualmente activa. Para determinar el ancho del indicador, considere el recuento de pestañas, que se puede recuperar con props.children.length.

Usa este CSS para embellecer el componente.

1234567891011121314151617181920212223242526272829.tabs{display: flex;align-items: center;justify-content: center;}.tab-btn{display: block;flex:1;padding:8px20px;background:#eee;border:0;}. tab-indicador-contenedor{visualización: flex;background:#eee;margin-bajo:10px;}.tab-indicador{altura:3px;fondo:#007bff;transición: transformar 0.2s;}.tab-contento{almohadilla:10px;}</pre>
css

Y finalmente, el componente se verá de la siguiente manera.

12345678910111213141516171819202122232425262728293031323334353637classTabsextendsComponent{ state ={ activeTabIndex:0};render(){const{ activeTabIndex }=this.state;const activeTab = props. children{ activeTabIndex];return(<div><divclassName="tabs">{props.children. map((tab, i)=>(<buttonclassName="tab-btn"onClick={()=>{this.setState({ activeTabIndex: i });}}key={i}>{tab. título de utilería}</botón>))}</div><divclassName="tab-indicador-contenedor"><divclassName="tab-indicador"style={{{ancho:100/ props.children. longitud+&cuota;%&cuota;, transform:`traducirX(${activeTabIndex *100}%)`}}/></div><divclassName=&cuota;tab-indicador&cuota;>{activeTab. props.children}</div></div>);}}</pre
jsx

En lugar de un componente de clase, también puedes tener un componente funcional usando el gancho useState. Aquí' es como se vería la versión funcional.

12345678910111213141516171819202122232425262728293031constTabs=props=>{const[activeTabIndex, setActiveTabIndex]=useState(0);const activeTab = props. children[activeTabIndex];return(<div><divclassName="tabs">{props.children. map((tab, i)=>(<buttonclassName="tab-btn"onClick={()=>{setActiveTabIndex(i);}}key={i}>{tab.props. title}</button>))}</div><divclassName="tab-indicator-container"><divclassName="tab-indicator"style={{{{ancho:100/ props.children. longitud+&cuota;%&cuota;, transform:`traducirX(${activeTabIndex *100}%)`}}/></div><divclassName=&cuota;tab-indicador&cuota;>{activeTab. props.children}</div></div>);};</pre
jsx

Aquí está el resultado final.