Handsontable无法正确呈现？

Question

我使用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>

在状态我维持双手的设置

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],


          },
}

。

让我知道组件渲染为什么它不会来，我需要渲染任何东西，然后我面对这个问题我无法解决这个问题，如果我单独使用双手单独工作正常，任何人请帮助我渲染这个。

提前致谢

Answer 1

组件在display: none;容器中呈现但其尺寸计算基于样式/可见性时非常常见的问题。

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