Soy nuevo en reaccionar y javascript. He estado aprendiendo a reaccionar y reaccionar al enrutador y un tutorial que estaba siguiendo estaba usando withRouter. De todos modos, encontré un código sobre cómo reimplementar withRouter ya que ya no es compatible. Mi pregunta es la siguiente. ¿Cómo obtiene la función interna el argumento props? ¿De dónde viene? Gracias a todos de antemano por la respuesta, he estado atascado en esto por un tiempo.
function withRouter(Component) { function ComponentWithRouterProp(props) { let location = useLocation(); let navigate = useNavigate(); let params = useParams(); return ( <Component {...props} router={{ location, navigate, params }} /> ); }Y este es el fragmento completo del código del Componente:
import { Routes, Route, Redirect} from 'react-router-dom' import { connect } from 'react-redux'; import React, { Component } from 'react'; import { useLocation, useNavigate, useParams } from "react-router-dom"; function withRouter(Component) { function ComponentWithRouterProp(props) { let location = useLocation(); let navigate = useNavigate(); let params = useParams(); return ( <Component {...props} router={{ location, navigate, params }} /> ); } return ComponentWithRouterProp; } const mapStateToProps = state => { return { dishes: state.dishes } } const HomePage = () => { return ( <div>home page component</div> ); } class MainPage extends Component { constructor(props) { super(props); } render() { return( <div> <div>main component {this.props.dishes}</div> <Routes> <Route path='/home' element={<HomePage />} /> </Routes> </div> ); } } export default withRouter(connect(mapStateToProps)(MainPage));Básicamente, está preguntando cómo funcionan los componentes de orden superior (HOC). Los HOC son solo funciones especiales de orden superior. En otras palabras, son funciones que devuelven otra función.
Tome el ejemplo básico de HOC:
const withExample => Component => props => { ... maybe some logic ... return <Component {...props} />; }; withExample se llama y pasa un componente React como argumento:
const MyExample = withExample(BaseExample);Esto devuelve una función, es decir, un componente React con esta definición:
const MyExample = props => { ... maybe some logic ... return <BaseExample {...props} {...additionalProps} />; }; Este es solo un componente normal de la función React, los props vienen como lo hacen con cualquier otro componente React.
<MyExample prop1="prop1" prop2={23} /> En su ejemplo de código, tanto withRouter como connect son HOC, cada uno toma un componente React, aumenta/inyecta accesorios adicionales y devuelve el componente decorado.