gpt4 book ai didi

javascript - 将 React 组件绑定(bind)到 Handontable 实例

转载 作者:行者123 更新时间:2023-11-30 20:25:02 26 4
gpt4 key购买 nike

react-handsontable 升级到 1.0.0 版本后,我不太确定如何将 React 组件绑定(bind)到 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>
);
}

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

如何将核心 API 方法与呈现的组件一起使用?我也raised an issue试图改进文档。

最佳答案

原来 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 .

关于javascript - 将 React 组件绑定(bind)到 Handontable 实例,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51020110/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com