react js如何制作动态表格答案

【问题标题】：How to make dynamic table in react jsreact 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

【问题讨论】：

标签： javascript arrays reactjs 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);

【讨论】：