内部方法如何获得react路由器中的道具

Question

我是react和javascript的新手。我一直在学习反应和反应路由器，我遵循的一个教程是使用路由器。无论如何，我发现了一些代码如何重新实现路由器，因为它不再受支持。我的问题如下。内部函数如何获取props参数。它是从哪里来的？提前感谢大家的回复，我已经被困了一段时间了。

function withRouter(Component) {
function ComponentWithRouterProp(props) {
let location = useLocation();
let navigate = useNavigate();
let params = useParams();
return (
<Component
{...props}
router={{ location, navigate, params }}
/>
);
}

这是组件代码的全部片段：

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));

Answer 1

您基本上是在问高阶组件(HOC(是如何工作的。HOCs只是特殊的高阶函数。换句话说，它们是返回另一个函数的函数。

以基本的HOC为例：

const withExample => Component => props => {
... maybe some logic ...
return <Component {...props} />;
};

调用withExample并传递一个React组件作为参数：

const MyExample = withExample(BaseExample);

这返回一个函数，即具有以下定义的React组件：

const MyExample = props => {
... maybe some logic ...
return <BaseExample {...props} {...additionalProps} />;
};

这只是一个常规的React功能组件，props和其他React组件一样。

<MyExample prop1="prop1" prop2={23} />

在您的代码示例中，withRouter和connect都是HOC，每个都使用一个React组件，扩充/注入额外的道具，并返回装饰的组件。