0

tengo las siguientes rutas

<Switch>
  <Route path="/" exact>
    <CarsList />
  </Route>
  <Route path="/car-detail/:id">
    <CarDetail>
  </Route>
</Switch>

el componente <CarsList /> contiene métodos para, por ejemplo, eliminar un auto de la lista, entre otros. Yo quiero que mi componente <CarDetail /> utiliza los mismo métodos que <CarsList />. Como podría usar los mismos métodos en dos componentes distintos? es posible pasarlos de uno a otro o debería volver a escribirlos ?

1 respuesta 1

0

Soluciones

Hola Franco. Para poder manejar este tipo de situaciones React te permite hacer un par de cosas que te pueden servir. He dado una respuesta similar en esta pregunta por si la quieres ver más a detalle:

Forward Props ()


Crea una función en el componente padre de CarList y CarDetails y luego pasala por props a ambos componentes. De esta manera, ambos estarán utilizando la función que requieren.

Ventajas:

  • Es fácil de implementar y no tienes que usar ninguna librería de control de estado por ejemplo
  • Es bastante útil cuando el nivel del componente que lo necesita no está muy abajo en el arbol.

Desventajas:

  • Si tienes que usar esa función en un sub sub componente de ambos componentes, puede ser un poco ineficiente e incómodo tener que pasar por props varias veces hasta llegar al componente que lo necesita.

Dame algo para copiar y pegar (?)

Esta sería básicamente la estructura que necesitas


function App() {
  const [state, setState] = useState("")   

  const myUtilFunctionHandler = () => {
    setState('Hago algo que le sirve a varios componentes')
  }
 
  <Switch>
    <Route path="/" exact>
     <CarsList message={state} onCreateMessage={myUtilFunctionHandler} />
    </Route>
   <Route path="/car-detail/:id">
     <CarDetail message={state} onCreateMessage={myUtilFunctionHandler}>
    </Route>
  </Switch>

}


function CarsList(props) {
  const { state, onCreateMessage } = props

  return (
    <div> 
      <span>{state}</span>
      <button onClick={onCreateMessage}>Acción en común</button>
    </div>
  )
}

Lo mismo harías en el otro componente que necesitas (CarDetails)

React Context


Una opción bastante elegante para poder manejar estados de la aplicación con nodos bastante anidados. Deberías ver el enlace de la pregunta que te dejé arriba donde lo explico un poco mejor.

Con esta solución ya no debes preocuparte por pasar por props la información, sino que haces uso de una lógica Consumidor - Proveedor. El problema de usar esta forma, es que solo deberías usarlo para información que no esté en constante cambio, como un authContext por ejemplo. Cada vez que algo cambie en el context, todos los hijos que esten dentro del Provider van a ser re-renderizados y eso puede ser un problema si tus datos cambian constantemente. (Sobretodo en una app mediana - grande, para apps pequeñas no debería existir ningun problema)

Para mas información LEER ESTO ANTES DE USAR CONTEXT

Tu archivo: carContext.jsx


...

export const CarContext = React.createContext({
  myUtilFunction: () => {},
  carInfo: null 
}) 

const CarContextProvider = ({children}) => {
  const [carInfo, setCarInfo] = useState(null);

  const myUtilFunction = (carInformation) => {
    setCarInfo(carInformation)
  }

  return (
    <CarContext.Provider value={{ carInfo, myUtilFunction }}>
      {children}
    </CarContext.Provider>
  )

}

export default CarContextProvider

Luego envuelve tu componente App.jsx


<Switch>

  <Route path="/" exact>
   <CarContextProvider>
       <CarsList />
   </CarContextProvider>

  </Route>
  <Route path="/car-detail/:id">
   <CarContextProvider>
      <CarDetail>
   </CarContextProvider>
  </Route>
</Switch>

y por último en tu componente CarDetail

...
import { CarContext } from 'context/carContext.js'

function CarDetail () {
 
 const {carInfo, myUtilFunction} = React.useContext(CarContext)

 return (
    <div> 
      <span>{carInfo}</span>
      <button onClick={myUtilFunction}>Acción en común</button>
    </div>
  )

}


Librería de estados

Puedes utilizar una libería de control de estados como Redux, el cual maneja un solo store del que puedes consumir. Esto permite hacer básicamente lo mismo que Context junto con otras cosas que puedes leer en la documentación.

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.