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/