javascript - 导入文件后更改此关键字的引用

Question

我正在使用 react-table显示数据。我想将我的表格列保留在 React 组件之外，因为它太大而无法放在那儿，并且还有可重用性目的。我做了一个表配置来保存我所有的表配置。问题是我在列中使用了一些本地状态引用。因此，当我从配置文件导入列时，它会在我使用 this.state 的地方给出错误。

tableconfig.js

export const table = [
  {
    resizable: false,
    width: 50,
    Cell: ({ original }) => {
      const { pageActivity, pageNumber } = this.state;
      const currentPageActivityRow = {
        ...get(pageActivity[pageNumber], "selectedRows")
      };
      return (
        <Checkbox
          checked={currentPageActivityRow[original.id] === true}
          onChange={() => this.selectRows(original.id)}
        />
      );
    }
  },
  {
    Header: "Contact ID",
    accessor: "id"
  }
];

表格组件.js

import {table} from '../config';
constructor(props){
    super(props);
    this.state = {
      pageNumber: 1,
      search: "",
      error: "",
      dialogOpen: false,
      isFilerActive: false,
      selectedFilters: {},
      pageActivity: {}
    };

    this.columns = table
  }

Answer 1

也许尝试绑定(bind)您的表？不过它必须是一个函数

const table = () => (
[
  {
    resizable: false,
    width: 50,
    Cell: ({ original }) => {
      const { pageActivity, pageNumber } = this.state;
      const currentPageActivityRow = {
        ...get(pageActivity[pageNumber], "selectedRows")
      };
      return (
        <Checkbox
          checked={currentPageActivityRow[original.id] === true}
          onChange={() => this.selectRows(original.id)}
        />
      );
    }
  },
  {
    Header: "Contact ID",
    accessor: "id"
  }
];
)

// tableComponent.js

constructor(props){
    super(props);
    this.state = {
      pageNumber: 1,
      search: "",
      error: "",
      dialogOpen: false,
      isFilerActive: false,
      selectedFilters: {},
      pageActivity: {}
    };

    this.columns = table.bind(this);
  }