Question

我有一个React Bootstrap Table2表功能组件，该组件从当前的一个API获取数据，并将数据显示在一个表中。

作为表column定义的一部分，我处理了某些值并使其链接。当用户单击链接时，他们将转到呈现相同表但包含数据子集的页面。

我正在尝试向组件添加一些逻辑，以便可以将各种链接路径与不同的API端点关联（例如，如果path为foo，api端点为bar，如果path为foo2，api端点为bar2-然后传递给axios。

我的想法是尝试使用props.match.path，并且当路径中的多个部分（/ section1 / sub-section / sub-sub-sub-section）分开时，将它们分开并映射到API端点。

但是我无法访问功能组件中的道具。我的方法是执行此操作的最佳方法（如果可以的话，如何才能最好地访问所需的数据）？或者是否有更好的方法来执行此操作？

import BootstrapTable from "react-bootstrap-table-next";
import paginationFactory from "react-bootstrap-table2-paginator";
import React, { useState, useEffect } from "react";
import axios from "axios";

const columns = [
  {
    dataField: "_id",
    hidden: true,
  },
  {
    dataField: "card_id",
    text: "Card Id",
    sort: true,
  },
  {
    dataField: "team",
    text: "Team",
    formatter: (rowContent, row) => {
      console.log(row);
      return (
        <>
          {/* {rowContent} */}
          <a
            target="_blank"
            rel="noopener noreferrer"
            // href={`${links[row.id]}`}
            href={`http://www.bbc.co.uk/${rowContent}`}
            // href={`http://www.bbc.co.uk/${row.card_id}`}
            style={{
              marginLeft: "12px",
            }}
          >
            {rowContent}
          </a>
        </>
      );
    },
  },
  {
    dataField: "brand",
    text: "Brand",
    sort: true,
  },
  {
    dataField: "career_stage",
    text: "Career Stage",
    sort: true,
  },
  {
    dataField: "forTrade",
    text: "For Trade",
    sort: true,
  },

  {
    dataField: "player",
    text: "Player",
    formatter: (rowContent, row) => {
      console.log(row);
      return (
        <>
          {/* {rowContent} */}
          <a
            target="_blank"
            rel="noopener noreferrer"
            // href={`${links[row.id]}`}
            href={`http://www.bbc.co.uk/${rowContent}`}
            // href={`http://www.bbc.co.uk/${row.card_id}`}
            style={{
              marginLeft: "12px",
            }}
          >
            {rowContent}
          </a>
        </>
      );
    },
  },
  {
    dataField: "series",
    text: "series",
  },

  /* {
    dataField: "price",
    text: "Price",
    formatter: (cell, row) => {
      return <p>${cell}</p>;
    },
    sort: true,
    sortFunc: (a, b, order, dataField, rowA, rowB) => {
      const numA = parseFloat(a);
      const numB = parseFloat(b);
      if (order === "asc") {
        return numB - numA;
      }
      return numA - numB; // desc
    },
  }, */
];

const BasicTable = () => {
  const [data, setData] = useState([]);
  console.log(data);

  useEffect(() => {
    axios
      .get(
        "https://webhooks.mongodb-realm.com/api/client/v2.0/app/cards-fvyrn/service/Cards/incoming_webhook/getAllCards"
      )
      .then((response) => {
        setData(response.data);
        console.log(response.data);
      })
      .catch(function (error) {
        console.log(error);
      });
  }, []);

  return (
    <BootstrapTable
      keyField="id"
      data={data}
      columns={columns}
      striped
      hover
      condensed
      pagination={paginationFactory()}
    />
  );
};

export default BasicTable;

编辑-好的，很抱歉提出这个愚蠢的问题。 RTFM。我已经发布了一个答案，以防它对其他新手有用，这些新手正在关注除React网站之外的其他教程。

Answer 1

抱歉，您的问题很愚蠢。如果您对任何人都有用，则只需传递drawableRes["contDescription"]作为参数CharSequence，然后在组件中使用，例如props

在功能组件中使用道具

1 个答案: