reactjs中如何導出復合組件

Question

我正在嘗試了解 ReactJS 中的復合組件模式。 一切都很好，但我無法以我想要的方式導出組件。

我創建了一個基本表（數據網格），它有許多組件，如 header、行、列、搜索、分頁等。

我希望最終用戶以這種方式導入此表。

import Table from './Table'

const DataGrid = () => {
     return (
        <Table>
            <Table.Title></Table.Title>
            <Table.Header>
                <Table.Row></Table.Row>
            </Table.Header>
        
            <Table.Body>
                <Table.Row></Table.Row>
            </Table.Body>
        </Table>
     )
}

現在在組件文件夾中，我有一個 index.js 文件，我正在嘗試導入所有組件，然后嘗試將其導出到 object

import {Table} from './Table'
import {Title} from './Title'
import {Header} from './Header'
import {Body} from './Body'

現在我應該怎么做才能以我想要的方式導出。 嘗試了許多解決方案，但沒有任何效果。

Answer 1

您需要導入index文件中的所有內容並准備一個新的 object 並將其導出：

index.js：

import { Table } from "./Table"; // this imports from Table.jsx file
import { Title } from "./Title";
import { Body } from "./Body";
import { Header } from "./Header";
import { Row } from "./Row";

const all = Table; // <-- Here: this (all) is the new object.
// We can name it whatever we want as it is going to be a default export

all.Title = Title;
all.Body = Body;
all.Header = Header;
all.Row = Row;

export default all;

現在，您可以使用它，如下所示：

數據網格.jsx：

import Table from "./Table"; // this imports from index.js file under "Table" folder

const DataGrid = () => {
  return (
    <Table>
      <Table.Title></Table.Title>
      <Table.Header>
        <Table.Row></Table.Row>
      </Table.Header>

      <Table.Body>
        <Table.Row></Table.Row>
      </Table.Body>
    </Table>
  );
};

編輯：

此答案假設您在如下目錄下有組件。 如果您有不同的路徑，請確保在導入時更改路徑。

src/
  Table/
    Body.jsx
    Header.jsx
    index.js
    Row.jsx
    Table.jsx
    Title.jsx
  DataGrid.jsx