Question

我对javascript较陌生，对react.js也不陌生。我被分配了在react.js中创建可调整大小的表列的任务。我发现column-resizer可以完成该任务，但是我无法使其正常工作。我无法使用ref来提取DOM元素，因为调整大小不起作用。有人请帮我解决这个问题，让我知道我在做错什么。以下是我正在使用的代码。

import ColumnResizer from 'column-resizer';
import React, { Component } from 'react';

class SomeComponent extends Component {

constructor(props) {
    super(props)

    this.table = React.createRef()

    this.componentDidMount = this.componentDidMount.bind(this)
    this.componentWillMount = this.componentWillMount.bind(this)
    this.componentDidUpdate = this.componentDidUpdate.bind(this)
    this.componentWillUpdate = this.componentWillUpdate.bind(this)
    this.enableResize = this.enableResize.bind(this);
    this.disableResize = this.disableResize.bind(this);
}

componentDidMount() {
    if (this.props.resizable) {
        this.enableResize();
    }
}

componentWillUnmount() {
    if (this.props.resizable) {
        this.disableResize();
    }
}

componentDidUpdate() {
    if (this.props.resizable) {
        this.enableResize();
    }
}

componentWillUpdate() {
    if (this.props.resizable) {
        this.disableResize();
    }
}

enableResize() {
    const normalRemote = this.table.current;  // normalTable is always null, because this.table is null too.
    const options = this.props.resizerOptions;
    options.remoteTable = normalRemote;
    if (!this.resizer) {
        this.resizer = new ColumnResizer(
            ReactDOM.findDOMNode(this)
                .querySelector(`#${this.headerId}`), options);
    } else {
        this.resizer.reset(options);
    }
}

disableResize() {
    if (this.resizer) {

        this.resizer.reset({ disable: true });
    }
}

render{
    return (
        <Table ref={this.table} >
        </Table>
    );
}
}

Answer 1

据我所知，无需创建引用并将其用于表。要使列大小调整器正常工作，正确的主要点是确保为库提供正确的ID或类，以便它知道要对哪个表进行操作。

我设法使用以下两个组件来创建一个工作示例。渲染应用程序的第一个。

import React from "react";
import ReactDOM from "react-dom";
import ReactTable from "./ReactTable";
import "./styles.css";

const App = () => (
  <div className="App">
    <ReactTable resizable={true} resizerOptions={{}} />
  </div>
);

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

第二个负责呈现表及其大小调整功能。

import React, { Component } from "react";
import ReactDOM from "react-dom";
import ColumnResizer from "column-resizer";

class ReactTable extends Component {
  constructor(props) {
    super(props);
    this.tableSelector = "#somethingUnique";
  }

  componentDidMount() {
    if (this.props.resizable) {
      this.enableResize();
    }
  }

  componentWillUnmount() {
    if (this.props.resizable) {
      this.disableResize();
    }
  }

  componentDidUpdate() {
    if (this.props.resizable) {
      this.enableResize();
    }
  }

  componentWillUpdate() {
    if (this.props.resizable) {
      this.disableResize();
    }
  }

  enableResize() {
    const options = this.props.resizerOptions;
    if (!this.resizer) {
      this.resizer = new ColumnResizer(
        ReactDOM.findDOMNode(this).querySelector(`${this.tableSelector}`),
        options
      );
    } else {
      this.resizer.reset(options);
    }
  }

  disableResize() {
    if (this.resizer) {
      this.resizer.reset({ disable: true });
    }
  }

  render() {
    return (
      <div>
        <table id="somethingUnique" cellSpacing="0">
          <tr>
            <th>Name</th>
            <th>Age</th>
          </tr>
          <tr>
            <td>Roy</td>
            <td>32</td>
          </tr>
          <tr>
            <td>Erik</td>
            <td>47</td>
          </tr>
          <tr>
            <td>John</td>
            <td>21</td>
          </tr>
          <tr>
            <td>Sally</td>
            <td>28</td>
          </tr>
        </table>
      </div>
    );
  }
}

export default ReactTable;

键是下面一行，指定要对this.tableSelector = "#somethingUnique";起作用的表，它与呈现函数中表的ID或类相对应。

您可以在this CodeSandbox中看到它的运行情况。

Answer 2

因此ref是一个传递元素的函数，因此它看起来可能像这样

<Table ref={table => this.table = table} />

此外，请注意，react在生命周期方法（例如componentDidMount）中自动绑定this。

如何在React中使列大小调整器工作

2 个答案: