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


          },
}

。

让我初步了解组件渲染的原因，在遇到这个问题之前，我需要渲染任何东西吗，我无法解决该问题，如果我单独使用handontable可以正常工作，任何人都可以帮助我呈现此图像。

预先感谢

Answer 1

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

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

Handsontable无法正确渲染？

1 个答案: