react js如何制作动态表格

Posted 2023-02-22

【中文标题】react js如何制作动态表格

【英文标题】：How to make dynamic table in react js

【发布时间】：2021-11-03 04:41:27

【问题描述】：

我目前想根据 API Attributes 显示表格标题，它将显示重量、长度、宽度和钩子，我已经尝试过，但我停留在如何仅显示 Attribute 对象的部分，如下图所示。请帮忙教我这个。这是我得到的结果，但我只是想将 Attributes 对象显示为 header 。

const renderTableHeader = () => 
      const header = Object.keys(data.data.VariationList[0]);
      return header.map((key, index) => <th key=index>key.toUpperCase()</th>)
   
   
      return (
      
      <Table>
            <thead>
          
              <tr>renderTableHeader()</tr>
            </thead>
            <tbody>
              data.data.VariationList.map((variation) => (
                <tr key=variation.VariationSKU>
                  <td className="text-center">variation.VariationSKU</td>
                  <td>variation.Attribute.Weight</td>
                  variation.Attribute.Diameter ? (
                    <td>variation.Attribute.Diameter</td>
                  ) : null
                  variation.Attribute.Length ? (
                    <td>variation.Attribute.Length</td>
                  ) : null
                  variation.Attribute.Size ? (
                    <td>variation.Attribute.Size</td>
                  ) : null
                  variation.Attribute.Width ? (
                    <td>variation.Attribute.Width</td>
                  ) : null
                  variation.Attribute.Hook ? (
                    <td>variation.Attribute.Hook</td>
                  ) : null

                  <td className="text-right">variation.Price</td>
                  <td className="td-actions text-right">
                    <Button
                      className="btn "
                      color="danger"
                      data-toggle="tooltip"
                      id="tooltip542628903"
                      size="md"
                      type="button"
                      onClick=() =>
                        addToCart(data.data.ID, variation.VariationSKU)
                      
                    >
                      ADD TO CART
                    </Button>
                  </td>
                </tr>
              ))
            </tbody>
          </Table>
      
      )

这是 Api

【参考方案1】：

export default class Table extends React.Component 
 
 constructor(props)
 super(props);
 this.getHeader = this.getHeader.bind(this);
 this.getRowsData = this.getRowsData.bind(this);
 this.getKeys = this.getKeys.bind(this);
 
 
 getKeys = function()

 
 
 getHeader = function()
 
 
 
 getRowsData = function()
 
 
 
 render() 
 return (
 <div>
 <table>
 <thead>
 <tr>this.getHeader()</tr>
 </thead>
 <tbody>
 this.getRowsData()
 </tbody>
 </table>
 </div>
 
 );
 

const RenderRow = (props) =>
 

试试这个结构，将json 文件中的数据传递到表中，以便正确更新它。 关注instructions了解更多详情

【参考方案2】：

只需更新代码的第 2 行以使用属性的值：

const header = Object.keys(data.data.VariationList[0].Attribute);