React：如何替換 function 組件中的 JSX 標簽？

Question

我正在嘗試修改 function 組件中存在的子組件。

假設這是我想在我自己的CustomizedTable function 組件中呈現的原始Table function 組件。 由於Table function 組件設計精美，我不想修改整個 function 或結構。 我希望實現的是自定義替換已有的Body組件

const Table = (props) => {
  return (
    <Context props={props}>
      <Container className={props.className} style={props.style}>
          <Header />
          <Body
              ColumnComponents={ColumnData}
              RowComponents={RowData}
          />
          <Footer />
      </Container>
    </Context>
  );
});

如何查找<Body/>組件並將其替換為嵌套在Table function 組件中的<CustomizedBody> ？ 有沒有辦法在不觸及現有<Body>的情況下修改它？

   import { Table } from './Table';


   const CustomizedBody = (props) => {
   return (
      <Body>
      // Body Add Ons
      </Body>
   )}

   export const CustomizedTable = (props) => { 
    
   return (
       <Table Body={<CustomizedBody>}>
       </Table>
   )}

Answer 1

當你將它作為props傳遞時，你可以在主要組件中將它用作props.children 。

React 建議在 inheritance 上使用組合模式。您可以在此處閱讀更多內容

React：如何替換 function 組件中的 JSX 標簽？

問題描述

1 個解決方案

解決方案1
0 2022-02-16 17:07:40

React：如何替換 function 組件中的 JSX 標簽？

問題描述

1 個解決方案

解決方案1 0 2022-02-16 17:07:40

解決方案1
0 2022-02-16 17:07:40