소개

스타일이 지정된 구성 요소는 CSS에서 자바 스크립트를 작성하고 구성 요소를 생성할 때 허용되지 않는 형식의 구성 요소이므로 새로운 구성 요소를 유연하게 사용할 수 있습니다.

Instalar 로스 파케테스

Solo se necesitará un paquete necesario para desarrollar el componente.
Comenzaremos 설치 스타일 구성 요소

$ npm install styled-components 

Una vez instalado el paquete necesario organizaremos las carpetas de la siguiente manera para mayor comodidad.



Creamos una carpeta llamada Tab en aquí crearemos el código para el desarrollo del componente. En el archivo styles.js tendremos el estilo de cada elemento de nuestro componente.
en el archivo index.jsx se escribirá la logica necesario para crear el tab component.

Creando los componentes

Comencemos escribiendo el estilo de los elementos de nuestro componente.

// Tab/styles.js
import styled from "styled-components";

export const TabContainer = styled.div`
  display: flex;
  width: 100%;
  background: red;
  align-items: stretch;
`;

const selectedColor = "rgb(30,190,230)";
const defaultColor = "transparent";

export const TabItem = styled.div`
  background-color: white;
  width: 100%;
  padding: 10px;
  cursor: pointer;
  transition: 0.3s;
  border-bottom: 4px solid ${(props) => (
    props.selected ? selectedColor : defaultColor
  )};
`;

Creamos dos componentes con estilo, el primer componente TabContainer solamente posicionará los componentes hijos horizontalmente.
El componente TabItem es el principal, en el cuál queremos que cambie el color del borde lower si tiene la propiedad selected en verdadero, si es así se asigna un color declarado en la constante selectedColor caso contrario el color del border recibe la constante defaultColor cual tiene 유엔 색상 transparente.

Creando el componente Tab.

//Tab/index.jsx
import React, { useEffect, useState } from "react";
import * as S from "./styles";

const Tab = ({ children, onTabSelected }) => {
  const [itemId, setItemId] = useState(0);

  useEffect(() => {
    onTabSelected && onTabSelected(itemId);
  }, [itemId, onTabSelected]);

  return (
    <S.TabContainer>
      {React.Children.map(children, (child, index) => {
        return React.cloneElement(child, {
          onClick: () => {
            setItemId(index);
          },
          selected: itemId === index
        });
      })}
    </S.TabContainer>
  );
};

export default Tab;

Lo primero que hacemos es importar todos los componentes de estilo con un alias cuál llamaremos S.

import * as S from "./styles";

Usaremos un estado para seleccionar el id actual del item, en este caso usaremos el índice de cada elemento hijo como su id.
Lo siguiente y la parte más Importante que se hará es el siguiente código.

return (
  <S.TabContainer>
    {React.Children.map(children, (child, index) => {
      return React.cloneElement(child, {
        onClick: () => {
          setItemId(index);
        },
        selected: itemId === index
      });
    })}
  </S.TabContainer>
);

Top-Level API React.children.map el cuál recibe como primer argumento el children, seguidamente una función en la cuál nos devolverá el componente actual y suíndice.
React, React.cloneElement, API의 ayuda de ayuda de otra API에 대한 복제 요소의 복제 요소에 대한 Dentro de la función lo que clonar cada elemente con sus propiedades que se declaren. Asimismo, también podremos asignarles nuevas propiedades en este caso le asignamos un evento onClick y una propiedad selected que como recordemos esta propiedad fué creada en el componente con estilo TabItem y aquí lo estamos manipulando para no tener la necesidad de escribir la lógica fuera de ella.
El evento que se le asigna ejecuta la acción de asignar el índice al estado de la siguiente manera, al momento de asignarle el estado también comparamos si el índice del elemento actual es igual al estado, si es así entonces se le aplica la propiedad selected caso 반대로 아니오.

return React.cloneElement(child, {
  onClick: () => {
     setItemId(index);
  },
  selected: itemId === index
});

하위 구성 요소 TabItem을 만듭니다.

//Tab/index.jsx
export const TabItem = memo(({ children, ...restProps }) => (
  <S.TabItem {...restProps}>{children}</S.TabItem>
));

Al componente TabItem le agregaremos el componente con estilo . Además le pasaremos la propiedad children y las demás propiedades restantes le asignaremos al componente con estilo cual desde el componente padre automáticamente agregará las funcionalidades requeridas. Como se puede observar está envuelto en componente de orden superior(memo) para evitar la rerenderización.

El código final sería el siguiente.

//Tab/index.jsx
import React, { memo, useEffect, useState } from "react";
import * as S from "./styles";

const Tab = ({ children, onTabSelected }) => {
  const [itemId, setItemId] = useState(0);

  useEffect(() => {
    onTabSelected(itemId);
  }, [itemId, onTabSelected]);

  return (
    <S.TabContainer>
      {React.Children.map(children, (child, index) => {
        return React.cloneElement(child, {
          onClick: () => {
            setItemId(index);
          },
          selected: itemId === index
        });
      })}
    </S.TabContainer>
  );
};

export const TabItem = memo(({ children, ...restProps }) => (
  <S.TabItem {...restProps}>{children}</S.TabItem>
));

export default Tab;

Ahora podemos utilizar el componente de la siguiente manera.

import React from "react";
import Tab, { TabItem } from "./Tab";

export default function App() {
  const onTabSelected = (index) => {
    console.log(index);
  };

  return (
    <div className="App">
      <Tab onTabSelected={onTabSelected}>
        <TabItem>item 1</TabItem>
        <TabItem>item 2</TabItem>
        <TabItem>item 3</TabItem>
      </Tab>
    </div>
  );
}

El resultado final quedaría de la siguiente manera.



Aquí puedes ver el código y un demo