如何根据React组件的status prop值（0/1）显示对应文本？

你不需要用State或者额外定义常量（当然定义常量会更易维护），直接在JSX中通过条件判断或者对象映射就能实现数字到文本的转换，以下是两种可行方案：

方案1：三元运算符（适合简单的二元判断） #

直接在渲染status的位置替换成三元表达式，判断status的值：

<td className="text-center">{status === 0 ? 'current' : 'importing'}</td>

方案2：对象映射（适合未来可能扩展更多状态的场景） #

在组件内部创建一个映射对象，把数字和对应文本关联起来，可读性和扩展性更好：

export const BidType = ({
  id,
  airline,
  fleet,
  seat,
  domicile,
  status,
  numBidPeriods,
  importedOn,
}) => {
  // 定义状态映射对象
  const statusMap = {
    0: 'current',
    1: 'importing'
  };
  
  return (
    <tr className="align-middle">
      {/* 其他代码不变 */}
      <td className="text-center">{statusMap[status]}</td>
      {/* 其他代码不变 */}
    </tr>
  );
};

如果担心传入的status不是0或1，可以加个兜底值避免显示undefined：

{statusMap[status] || 'unknown'}

完整修改后的组件代码 #

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,
}) => {
  const statusMap = {
    0: 'current',
    1: 'importing'
  };

  return (
    <tr className="align-middle">
      <td>{id}</td>
      <td>
        {seat} {domicile} {fleet}
      </td>
      <td className="text-center">{statusMap[status] || 'unknown'}</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,
};

内容的提问来源于stack exchange，提问作者Jo Murray