Hay algunas formas diferentes de pasar valores entre componentes en React, según la situación y el comportamiento deseado. Estos son algunos enfoques comunes:

Accesorios:

La forma más común de pasar valores entre componentes es a través de props. Los accesorios se utilizan para pasar datos de un componente principal a un componente secundario. El componente secundario puede acceder a los valores de prop a través de this.props o mediante la desestructuración. Por ejemplo:

// Parent component
function Parent() { const message = "Hello, world!"; return <Child message={message} />;
} // Child component
function Child(props) { return <div>{props.message}</div>;
}

Antecedentes:

El contexto es una forma de pasar datos a un árbol de componentes sin tener que pasar accesorios manualmente en cada nivel. El contexto proporciona una forma de compartir valores como un tema, una configuración regional o un estado de autenticación entre los componentes sin tener que pasar explícitamente una propiedad a través de cada nivel del árbol. Por ejemplo:

const MyContext = React.createContext(); // Parent component
function Parent() { return ( <MyContext.Provider value="Hello, world!"> <Child /> </MyContext.Provider> );
} // Child component
function Child() { const message = React.useContext(MyContext); return <div>{message}</div>;
}

Levantamiento de estado:

A veces, es posible que necesite pasar datos entre componentes que no están directamente relacionados como padre e hijo. En este caso, puede elevar el estado a un ancestro común y transmitirlo como accesorios. Por ejemplo:

// Grandparent component
function Grandparent() { const [count, setCount] = React.useState(0); return ( <div> <Parent count={count} setCount={setCount} /> </div> );
} // Parent component
function Parent(props) { return ( <div> <Child count={props.count} setCount={props.setCount} /> </div> );
} // Child component
function Child(props) { return ( <div> <button onClick={() => props.setCount(props.count + 1)}> Increment count </button> </div> );
}

Al seguir estos enfoques, puede pasar valores entre componentes en React de una manera que se adapte a su caso de uso y lo ayude a crear aplicaciones escalables y mantenibles.

Sígueme en Codementor para obtener más consejos y trucos como este.
Por favor, dale me gusta y suscríbete para estar al día con mis últimos artículos sobre diferentes temas.

Gracias !