reactjs - 如何使用反应将对象数组映射到表中的行？

Question

我是 React 的初学者，我想将硬编码的数组对象映射到表行中。如何以最少的编码量来实现这一点？以下是我的代码，我使用了一个类组件来完成任务..

import React, { Component } from "react";
import "../../components/channelList/channelList.scss";
import { bindActionCreators } from "redux";
import { connect } from "react-redux";
// import { channelActions, channelSelectors } from './ducks';
import { optionsListActions } from "../../components/purchaseOptionListing/ducks";
import { Link } from "react-router-dom";
import ConfirmationModal from "./../../components/confirmationModal/ConfirmModal";
import ToastModal from "./../../components/Toast/ToastModal";
import { withRouter } from "react-router-dom";
import ProductListTable from "./../../components/ProductListTable/ProductListTable";
import ProductTableHeader from "./../../components/ProductTableHeader/ProductTableHeader";
import Spinner from "./../../components/spinner/spinner";
import ProvisioningMatrixListHeaderView from "./../userManagementListHeader/ProvisioningMatrixListHeader";

let data = [
  {
    col1: "col1",
    col2: "col2",
    col3: "col3",
    col4: "col4",
    col5: "col5",
    col6: "col6",
    col7: "col7",
    col8: "col8",
    col9: "col9",
    col10: "col10",
    col11: "col11",
    col12: "col12",
    col13: "col13"
  },

  {
    col1: "col1",
    col2: "col2",
    col3: "col3",
    col4: "col4",
    col5: "col5",
    col6: "col6",
    col7: "col7",
    col8: "col8",
    col9: "col9",
    col10: "col10",
    col11: "col11",
    col12: "col12",
    col13: "col13"
  }
];

export class ProvisioningMatrixList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      channels: "",
      channelsWithThumbnails: "",
      deleted: false,
      searchQuery: "",
      updatedList: "",
      deleteList: [],
      inactive: false,
      loading: false,
      hasSubmitted: null,
      showModal: false,
      handlerFunction: "",
      productId: "",
      errorMessage: ""
    };
    // this.search = this.search.bind(this);
    this.onDelete = this.onDelete.bind(this);
    this.onActivateProduct = this.onActivateProduct.bind(this);
    this.onSubmitHandler = this.onSubmitHandler.bind(this);
  }

  render() {        
    const descStyle = {
      display: "-webkit-box",
      // height: '80px',
      fontSize: " 14px",
      lineHeight: "1",
      WebkitLineClamp: 8,
      WebkitBoxOrient: "vertical",
      overflow: "hidden",
      textOverflow: "ellipsis",
      padding: "0",
      margin: ".75rem",
      // borderCollapse: "collapse",
      width: "100%"
    };
    let path = this.props.pathname.split("/");

    let dateTimeVisible;
    if (
      this.props.pathname.includes("vodList") ||
      this.props.pathname.includes("primaryPackage") ||
      this.props.pathname.includes("secondaryPackage") ||
      this.props.pathname.includes("dataBundle") ||
      this.props.pathname.includes("additionalScreens") ||
      this.props.pathname.includes("svod")
    ) {
      dateTimeVisible = true;
    } else {
      dateTimeVisible = false;
    }




    return (
      <>
        <style>
          {
            "table,th,td{border-collapse: collapse; border: 1px solid #6c757d;padding: 8px; table-layout: fixed;}"
          }
        </style>

        <table id="mytable" className="table" style={descStyle}>
          <thead>
            <th className="table-header-font">
              <b>Connection No.</b>
            </th>
            <th className="table-header-font">
              <b>Primary Package</b>
            </th>
            <th className="table-header-font">
              <b>Secondary Package</b>
            </th>
            <th className="table-header-font">
              <b>Extra Channels/Channel Bundles</b>
            </th>
            <th className="table-header-font">
              <b>SVOD</b>
            </th>
            <th className="table-header-font">
              <b>VOD/VOD Bundles</b>
            </th>
            <th className="table-header-font">
              <b>Data Bundles</b>
            </th>
            <th className="table-header-font">
              <b>Additional Screens</b>
            </th>
            <th className="table-header-font">
              <b>Other Packages</b>
            </th>
            <th className="table-header-font">
              <b>SLT ACC No</b>
            </th>
            <th className="table-header-font">
              <b>SLT Tel No</b>
            </th>
            <th className="table-header-font">
              <b>Mobile No</b>
            </th>
            <th className="table-header-font">
              <b>Connection Type</b>
            </th>
          </thead>

          <tbody>
            <tr>

            </tr>

          </tbody>
        </table>


      </>
    );
  }
}

function mapStateToProps(state) {
  return {
    ...state
    // vodData: channelSelectors.getVodData(state),
    // errorMessage: state.Channels.errorMessage,
    // purchaseOptions: state.ChannelFilter.purchaseOptions.purchaseOptions
  };
}

function mapDispatchToProps(dispatch) {
  return {
    // channelActions: bindActionCreators(channelActions, dispatch),
    purchaseOptionsActions: bindActionCreators(optionsListActions, dispatch)
  };
}

export default withRouter(
  ProvisioningMatrixListHeaderView(
    connect(mapStateToProps, mapDispatchToProps)(ProvisioningMatrixList)
  )
);

我使用了一个类组件，我想在反应中使用 .map 将数组对象映射到表行中。

标签： reactjs

Answer 1

请找到此沙箱以获取确切实施

如果data数组中的每个项目对应于每一行，您可以尝试以下

  let data = [
      {
        col1: "col1",
        col2: "col2",
        col3: "col3",
        col4: "col4",
        col5: "col5",
        col6: "col6",
        col7: "col7",
        col8: "col8",
        col9: "col9",
        col10: "col10",
        col11: "col11",
        col12: "col12",
        col13: "col13"
      },

      {
        col1: "col1",
        col2: "col2",
        col3: "col3",
        col4: "col4",
        col5: "col5",
        col6: "col6",
        col7: "col7",
        col8: "col8",
        col9: "col9",
        col10: "col10",
        col11: "col11",
        col12: "col12",
        col13: "col13"
      }
    ];


      const renderTableBody = () => {
    return (
      <tbody>
        {data.map((row, i) => {
          return (
            <tr key={i}>
              {Object.entries(row).map(([key, value]) => {
                return <td key={key}>{value}</td>;
              })}
            </tr>
          );
        })}
      </tbody>
    );
  };

如有任何问题，请随时提出