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

我对javascript比较陌生，对

react.js也完全陌生。我被指派了一项任务，在
react.js
中创建可调整大小的表列。我已经找到了可以完成这项任务的方法，但我无法让它工作。我无法在react中使用
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>
    );
}
}

从“列大小调整器”导入列大小调整器；
从“React”导入React，{Component}；
类SomeComponent扩展组件{
建造师（道具）{
超级（道具）
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.enablesize=this.enablesize.bind（this）；
this.disableResize=this.disableResize.bind（this）；
}
componentDidMount（）{
if（this.props.resizable）{
这个.enableResize（）；
}
}
组件将卸载（）{
if（this.props.resizable）{
此参数为.disableResize（）；
}
}
componentDidUpdate（）{
if（this.props.resizable）{
这个.enableResize（）；
}
}
componentWillUpdate（）{
if（this.props.resizable）{
此参数为.disableResize（）；
}
}
enableResize（）{
const normalRemote=this.table.current；//normalTable始终为null，因为this.table也为null。
const options=this.props.resitzeroptions；
options.remoteTable=normalRemote；
如果（！this.resizer）{
this.resizer=新的ColumnResizer(
ReactDOM.findDOMNode（此）
.querySelector（`${this.headerId}`），选项）；
}否则{
此.resizer.reset（选项）；
}
}
disableResize（）{
如果（此.resizer）{
this.resizer.reset（{disable:true}）；
}
}
渲染{
返回(
);
}
}
因此ref是一个传递元素的函数，因此它可能看起来像这样

this.table=table}/>

另外，作为旁注，react会在生命周期方法（如componentDidMount）中自动绑定
此
。
据我所知，无需创建ref并将其用于表。要使列大小调整器正常工作，关键是确保为库提供正确的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);

从“React”导入React；
从“react dom”导入react dom；
从“/ReactTable”导入ReactTable；
导入“/styles.css”；
常量应用=（）=>(
);
const rootElement=document.getElementById（“根”）；
ReactDOM.render（.
非常感谢！现在很有意义[我不需要15+声誉，因此此帖子不显示+1.]也要感谢你。[我不需要15+声誉，因此此帖子不显示+1.]
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;