在功能组件中使用 props

Question

我有一个 React Bootstrap Table2 table 功能组件，它从单个 API（目前）获取数据并在 table 中显示数据。

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

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

我的想法是尝试使用 props.match.path 并且当路径中有多个部分时 (/section1/sub-section/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

抱歉这个愚蠢的问题。如果它对任何人有用，你只需要传入 props 作为参数 const SingleCard = (props) => {....} 然后在组件中使用，例如props.match.path

在功能组件中使用 props

Using props in a functional component

reactjs

react-bootstrap

react-bootstrap-table