如果道具编号为 1 或 0，如何让我的道具值显示“正在导入”或“当前”？

Question

我正在尝试获取此属性（状态），其值为 1 或 0，以显示“正在导入”或“当前”，而不是仅显示 1 或 0。

因为我没有使用 State 或 setState 并且没有定义常量，所以我不确定如何设置 if 语句来显示所需的文本。我正在使用 React 和 Storybook。出于可重用性的目的，该组件与表的其余部分分开。这是每个表行的代码。

import React from "react";
import PropTypes from "prop-types";
import { GiCloudDownload } from "react-icons/gi";
import { FaAngleDoubleRight } from "react-icons/fa";
import { MdClose } from "react-icons/md";

export const BidType = ({
  id,
  airline,
  fleet,
  seat,
  domicile,
  status,
  numBidPeriods,
  importedOn,
}) => {
  return (
    <tr className="align-middle">
      <td>{id}</td>
      <td>
        {seat} {domicile} {fleet}
      </td>
      <td className="text-center">{status}</td>
      <td className="text-center">{numBidPeriods}</td>
      <td className="text-center">{importedOn}</td>
      <td className="d-grid gap-2 ">
        <button className="btn btn-primary btn-sm bg-light">
          <GiCloudDownload /> Retry Import
        </button>
        <button className="btn btn-primary btn-sm bg-light" disabled>
          Bid Periods <FaAngleDoubleRight />
        </button>
        <button className="btn btn-primary btn-sm bg-light" disabled>
          Import History <FaAngleDoubleRight />
        </button>
        <button className="btn btn-danger btn-sm">
          <MdClose /> Delete
        </button>
      </td>
    </tr>
  );
};

BidType.propTypes = {
  id: PropTypes.number,
  airline: PropTypes.string,
  fleet: PropTypes.string,
  seat: PropTypes.string,
  domicile: PropTypes.string,
  status: PropTypes.number,
  numBidPeriods: PropTypes.number,
  importedOn: PropTypes.string,
};

Answer 1

您可以在返回之前执行 if else 条件来检查 status === 1 或 0。 之后，您可以根据结果以字符串的形式显示您想要的内容，例如：

const textToDisplayInsteadOfStatus = status === 1 ? "importing" :"current";

您只需在退货中显示结果即可

<td className="text-center">{textToDisplayInsteadOfStatus}</td>