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>

在這種狀態下，我正在維護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可以正常工作，請有人幫我進行渲染這個。

提前致謝

Answer 1

在display: none;內部渲染組件時，很常見的問題是display: none; 容器，但其尺寸計算基於樣式/可見性。

當Bootsontable再次可見時，使用Bootstrap或其他事件（例如MutationObserver ）中的回調來刷新它。 一個Angular（是的，我知道）的例子來展示這個想法： https : //jsfiddle.net/xfzqtw3p/1/