将 React 组件绑定到 Handontable 实例

Posted 2023-02-21

【中文标题】将 React 组件绑定到 Handontable 实例

【英文标题】：Binding the React component to a Handontable instance

【发布时间】：2018-12-03 19:56:09

【问题描述】：

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   stretchH="all" />
    </div>
  );

Handsontable Core API 参考展示了如何调用它的方法：

var ht = new Handsontable(document.getElementById('example1'), options);

所以我尝试向 React 组件添加一个 ID 并创建一个引用该元素的 Handsontable 的新实例，但它最终只是呈现另一个表：

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


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

如何将 Core API 方法与呈现的组件一起使用？我还 raised an issue 试图改进文档。

【参考方案1】：

原来HotTable 有一个hotInstance——Handsontable 的一个实例——你仍然需要添加对组件的引用才能访问它。所以按照我之前的例子，它应该看起来像这样：

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

React.createRef() 的替代品是callback refs。