Handsontable 无法正确渲染？

Posted 2023-03-22

【中文标题】Handsontable 无法正确渲染？

【英文标题】：Handsontable not rendering properly?

【发布时间】：2019-07-21 03:44:23

【问题描述】：

我使用 React Handsontable 添加多行，

import  HotTable  from '@handsontable/react';
import 'handsontable-pro/dist/handsontable.full.css';

在渲染中，我在折叠引导面板中加载 hotTable

<div className="panel-group" id="accordion">
<div className="panel panel-default">
  <div className="panel-heading">
    <h4 className="panel-title">
      <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Collapsible Group 1</a>
    </h4>
  </div>
  <div id="collapse1" className="panel-collapse collapse in">
    <div className="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
  </div>
</div>
<div className="panel panel-default">
  <div className="panel-heading">
    <h4 className="panel-title">
      <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Collapsible Group 2</a>
    </h4>
  </div>
  <div id="collapse2" className="panel-collapse collapse">
    <div className="panel-body">
          <div className="page-content">
               <div className="">
                  <div id="hot-app">
                    <HotTable root="hot" ref="hot" settings=this.state.settings strechH="all" />
                  </div>
                </div>
            </div>

    </div>
  </div>
</div>

在我维护handsontable的设置的状态下

this.state = 
  settings: 
            colHeaders:['Job Title', 'Name', 'Telephone','Fax','Handphone' , 'Email'],
            data: [title:"", contactName:"", telephone: "", fax: "", handphone: "",  email: ""],

           columns: [

                 data:"title",
                 data: "contactName",
                 data: "telephone",
                 data:"fax",
                 data:"handphone",
                 data:"email",

             ],

            minSpareRows: 1,
            contextMenu: true,
            rowHeaders:true,
            manualColumnResize: true,
            columnSorting: true,
            manualRowResize: true,
            manualRowMove: true,  
            manualColumnMove: true,
            colWidths: [150, 150, 100,150, 150, 150],


          ,

.

在组件渲染时让我知道为什么它没有出现， 在我遇到这个问题之前我是否需要渲染任何东西我无法解决这个问题，如果我单独使用handsontable，它工作正常， 任何人请帮我渲染这个。

提前致谢

【参考方案1】：

当组件在 display: none; 容器内呈现但其尺寸计算基于样式/可见性时，这是很常见的问题。

当 Handsontable 再次可见时，使用来自 Bootstrap 或其他事件（即MutationObserver）的回调来刷新它。一个 Angular（是的，我知道）示例来展示这个想法：https://jsfiddle.net/xfzqtw3p/1/