React 如何將道具發送到 HOC 內部使用的功能組件？

Question

我很好奇在使用功能組件時是否可以實現這一點？

在我的 App.js 中，在下面的第一個代碼片段中，我想向 HOC 發送一個帶有一些道具的組件（這里：PageMain）。

當試圖通過發送一個帶有相應的 JSX 來做到這一點時。 道具，我收到了ff。 錯誤：

警告：React.jsx: type is invalid -- 期望一個字符串（對於內置組件）或一個類/函數（對於復合組件）但是得到：. 您是否不小心導出了 JSX 文字而不是組件？

根據描述這是有道理的，因為我試圖發送這個而不是實際的組件：

<PageMain childContent={<p>Hey I'm the child component content!</p>

但是有沒有一種干凈的方法來實現這一點？ 我的想法是將道具轉發給最終接收者，以便 PageMain 可以使用

{props.childContent && <>props.childContent</>}

我的 App.js：

import { PageMain } from "./MyHOCStuff/PageMain";
import { Header } from "./MyHOCStuff/Header";
import { Footer } from "./MyHOCStuff/Footer";
import { withLayout } from "./MyHOCStuff/withLayout";

const PageWithLayout = withLayout(<PageMain childContent={<p>Hey I'm the child component content!</p>} />, Header, Footer)

function App() {
  return (
    <>
      <PageWithLayout message={"Hello from within a HOC."} />
    </>
  );
}

export default App;

我的 HOC：

import React from "react";
export const withLayout = (PageComponent, HeaderComponent, FooterComponent) => {
  return function WithPage({ ...props }) {
    console.log(PageComponent.props);
    return (
      <div>
        <HeaderComponent />
        {props.message && <h1>{props.message}</h1>}
        <PageComponent />
        <FooterComponent />        
      </div>
    );
  };
};

最終應該接收道具的組件：

export const PageMain = ({...props}) =>{
    return <>
        <h2>Page Content Stuff</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adip bla bla bla...</p>
        {props.childContent && <>props.childContent</>}

    </>;
}

Answer 1

從 props 渲染組件的正確方法是像這樣調用它{componentFromProps} 。 請注意，您實際上並不需要該 childContent 道具，當您將內容嵌套在 JSX 標記中時，父組件將在名為 children 的道具中接收該內容。 然后，您可以像使用 PageMain 一樣渲染它。

import React from "react";

export const withLayout = (PageComponent, HeaderComponent, FooterComponent) => {
    return function WithPage(props) {
        return (
            <div>
                {HeaderComponent}
                {props.message && <h1>{props.message}</h1>}
                {PageComponent}
                {FooterComponent}
            </div>
        );
    };
};
const PageMain = ({children}) => {
    return <>
        <h2>Page Content Stuff</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adip bla bla bla...</p>
        {children}
    </>;
}

const Header = <header>my header</header>
const Footer = <footer>my footer</footer>
const PageWithLayout = withLayout(<PageMain><p>Hey I'm the child component content!</p></PageMain>, Header, Footer)

function App() {
    return (
        <>
            <PageWithLayout message={"Hello from within a HOC."}/>
        </>
    );
}


export default App;

Answer 2

您是否嘗試過像這樣傳遞子內容？

() => <p>Hey I'm the child component content!</p>

此外，令我震驚的是，有一種更簡單的方法可以使用路由器構建布局：

import { BrowserRouter, Routes, Route } from 'react-router-dom'
import Header from 'Components/Layout/Header/Header'
import Footer from 'Components/Layout/Footer/Footer'
import PageA from 'Components/Page/PageA/PageA'
import PageB from 'Components/Page/PageB/PageB'

function App () {
  return (
    <BrowserRouter>
      <Header/>
      <Routes>
        <Route path="/foo" element={<PageA/>}/>
        <Route path="/bar" element={<PageB/>}/>
      </Routes>
      <Footer/>
    </BrowserRouter>
  )
}

export default App