如何從另一個文件添加數組作為antd表中的數據源

Question

我需要從另一個 js 文件添加一個數組作為另一個 js 文件中表的數據源，這是可能的。我已經有一個數組並且已映射，我只需要在另一個 js 文件中調用它

接觸器.js

import React from "react";
import Wrapper from "./style";
import { Table, Divider, Tag } from 'antd';
import 'antd/dist/antd.css';

const CatagoryMapping = (props) => {
    const {data} = props;
    const dataSource = [
        {
          key: '1',
          name: 'Mike',
          age: 32,
          address: '10 Downing Street',
        },
        {
          key: '2',
          name: 'John',
          age: 42,
          address: '10 Downing Street',
        },
      ];
      
      const columns = [
        {
          title: 'Name',
          dataIndex: 'name',
          key: 'name',
        },
        {
          title: 'Age',
          dataIndex: 'age',
          key: 'age',
        },
        {
          title: 'Address',
          dataIndex: 'address',
          key: 'address',
        },
      ];
      
      
    return(

       <Wrapper>
            <Table dataSource={dataSource} columns={columns} />;
       </Wrapper>
    );
}
export default CatagoryMapping;

我想將上面的數據源數組更改為下面給出的數組（承包商） ps：已經映射了數組，

分包商.js

 const Contractors = [
        {
            id:1,
            
            image:"contractorImage.svg",
            numberofcontarcts:'24 contracts',
            location:"5 Temple Way, 
            locationImage:'location.svg',
        },
        {
            id:2,
           
            image:"contractorImage.svg",
            numberofcontarcts:'24 contracts',
            location:"5 Temple Way,
            locationImage:'location.svg',
        },
        {
            id:3,
            
            image:"contractorImage.svg",
            numberofcontarcts:'24 contracts',
            location:"5 Temple Way,
            locationImage:'location.svg',
        },
        {
            id:4,
            
            image:"contractorImage.svg",
            numberofcontarcts:'24 contracts',
            location:"5 Temple Way, 
            locationImage:'location.svg',
        },
        {
            id:5,
            name:"Zombazu",image:"contractorImage.svg",
            numberofcontarcts:'24 contracts',
            location:"5 Temple Way, 
            locationImage:'location.svg',
        },
        {
            id:6,
           
            image:"contractorImage.svg",
            numberofcontarcts:'24 contracts',
            location:"5 Temple Way
            locationImage:'location.svg',
        },
    ]

Answer 1

只需將其作為 ES 模塊導入即可。 所以你需要在你的數據源文件中導出 const 然后導入：

承包商.js

export const Contractors = [...]

承包商.js

import { Contractors } from "./contractors";
...
<Table dataSource={Contractors} />

注意：最好使用標准的 const 大寫 kebab_case 名稱：CONTRACTORS