在功能组件中使用道具

问题描述

我有一个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",{
    datafield: "career_stage",text: "Career Stage",{
    datafield: "forTrade",text: "For Trade",{
    datafield: "player",text: "Player",{
    datafield: "series",text: "series",/* {
    datafield: "price",text: "Price",formatter: (cell,row) => {
      return <p>${cell}</p>;
    },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网站之外的其他教程。

解决方法

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