Default.HOC.js
import React from "react";
import { Route, Routes } from "react-router-dom";
import DefaultLayout from "../layouts/Default.layout";
const DefaultHOC = ({ component: Component, ...rest }) => {
// component
// props -> path exact
return (
<Routes>
<Route
{...rest}
component = {(props) => {
<DefaultLayout>
<Component {...props} />
</DefaultLayout>
}}
/>
</Routes>
);
};
export default DefaultHOC;
Tem.js
import React from "react";
function Temp() {
return <h1>This is a temp component</h1>
}
export default Temp;
Default.layout.js
import React from "react";
const DefaultLayout = (props) => {
return (
<div style={{ padding: '10px' }}>
<h1>Default Layout Page</h1>
{props.children}
</div>
);
};
export default DefaultLayout;
App.js
import { Route, Routes } from "react-router-dom";
// HOC
import DefaultHOC from "./HOC/Default.HOC";
// Component
import Temp from "./components/temp";
function App() {
return (
<>
<DefaultHOC path="/" exact element={<Temp />} />
</>
);
}
export default App;
我关注的视频讲座使用的是较旧的版本，问题是当我拨打children时，只有Temp在渲染，即屏幕上只显示:
"这是一个临时组件"
而它应该将结果显示为:
"默认布局页面 这是一个临时组件"
我试着用element代替component，结果是一样的.此外，当我删除非 struct 化props 和所有，它只显示"默认布局页面".
