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"
  }
];

tableComponent.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

也许尝试绑定您的table？它必须是一个功能

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);
  }

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

1 个答案: