React 中表头和行的动态大小调整

如何解决React 中表头和行的动态大小调整

目前有一个表格（使用 flexBox 创建），其固定大小为每个标题和行的宽度的 20%。该表格用于多种不同的语言，如果给定语言中的标题太长，则标题位于下一个语言的顶部。

我需要什么：

• 动态调整标题大小以始终显示完整标题
• 根据标题的大小，行列的大小应相同
• 如果行列比标题宽，则标题应占据行列的大小
• 如果标题和行列的内容太短，则需要回退 min-width。

我尝试过的：

使用 refs 测量标题和列行的大小进行比较并选择较大的作为宽度，但是我在 componentDidMount 循环中给出的大小是在元素实际呈现之前，给了我一个错误值。

将宽度设置为自动显示完整内容，但我需要动态调整标题和行列的大小，以便它们具有相同的长度并显示完整内容。如果表格比网格宽，则有一个 x 滚动。

解决此问题的最佳解决方案是什么？

代码（使用 UI-Kit）：

      <div className="partial-project-quotes">
        <div className="uk-grid fr-color-black uk-text-bold t-head uk-flex-Nowrap">
          <div className="uk-width-auto">
            <{DynamicHeader}/> 
          </div>
          <div className="uk-width-1-5">
            <{DynamicHeader}/> 
          </div>
          <div className="uk-width-1-5">
            <{DynamicHeader}/> 
          </div>
          <div className="uk-width-1-5">
            <{DynamicHeader}/> 
          </div>
          <div className="uk-width-1-5">
            <{DynamicHeader}/> 
          </div>
        </div>
        <div className="uk-grid uk-margin-top">
          {this.props.orders && this.props.orders.map((order,index ) => {
            const key = `order_${index}`;
            return (
              <div  key={key} className="uk-width-1-1 uk-margin-bottom">
                <DefaultProjectItem>
                  <div className="uk-grid">
                    <div className="uk-width-1-5">
                      <{DynamicContent}/> 
                    </div>
                    <div className="uk-width-1-5">
                      <{DynamicContent}/> 
                    </div>
                    <div className="uk-width-1-5">
                      <{DynamicContent}/> 
                    </div>
                    <div className="uk-width-1-5">
                      <{DynamicContent}/> 
                    </div>
                    <div className="uk-width-1-5">
                      <{DynamicContent}/> 
                    </div>
                  </div>
                </DefaultProjectItem>
              </div>
            );
          })}
         </div>