Javascript 将React组件绑定到可切换实例

在

react handsontable

升级到1.0.0版之后，我不太确定如何将react组件绑定到handsontable实例，因为

handsontable

现在是对等依赖项，不再是react包装器的一部分，因此无法再通过引用访问它

react handsontable

文档显示了如何呈现

handsontable

组件：

render() {
  return (
    <div id="hot-app">
      <HotTable data={this.data} colHeaders={true} rowHeaders={true} width="600" height="300" stretchH="all" />
    </div>
  );
}

因此，我尝试向React组件添加一个ID，并创建一个引用该元素的

Handsontable

的新实例，但它最终呈现了另一个表：

componentDidMount() {
  const hot = new Handsontable(document.getElementById('hot'));
  // hot.countCols();
}

render() {
  return (
    <React.Fragment>
      <HotTable id="hot" settings={...} />
    </React.Fragment>
  );
}

componentDidMount（）{
const hot=新的Handsontable（document.getElementById（'hot'）；
//hot.countCols（）；
}
render（）{
返回(
);
}

---

如何将核心API方法用于呈现组件？我还尝试改进文档。

结果是，

热表

有一个

热实例

——一个

可手持

——您仍然需要向组件添加一个引用来访问它。按照我前面的例子，它应该是这样的：

constructor(props) {
  super(props);
  this.hotRef = React.createRef();
}

componentDidMount() {
  const hotInstance = this.hotRef.current.hotInstance;
  // hotInstance.countCols();
}

render() {
  return (
    <React.Fragment>
      <HotTable ref={this.hotRef} settings={...} />
    </React.Fragment>
  );
}

构造函数（道具）{
超级（道具）；
this.hotRef=React.createRef（）；
}
componentDidMount（）{
const hotInstance=this.hotRef.current.hotInstance；
//hotInstance.countCols（）；
}
render（）{
返回(
);
}

React.createRef（）

的替代方法是

constructor(props) {
  super(props);
  this.hotRef = React.createRef();
}

componentDidMount() {
  const hotInstance = this.hotRef.current.hotInstance;
  // hotInstance.countCols();
}

render() {
  return (
    <React.Fragment>
      <HotTable ref={this.hotRef} settings={...} />
    </React.Fragment>
  );
}