如何根據 Firebase 中的數據向按鈕添加條件（顏色、文本）

Question

我試圖在我的組件中為按鈕設置條件。 我的 lastRunStatus {cloundFunctions.lastRunStatus} 的 Firebase 集合中有一個 Boolean 條件，如果它是真的，我會保持綠色並說“雲功能”，如果它是假的，我希望它變成紅色並說“出了點問題”。

任何提示、指針或代碼將不勝感激:)

import "../../App";
import "semantic-ui-css/semantic.min.css";
import { Icon, Card, Button } from "semantic-ui-react";
import "semantic-ui-css/semantic.min.css";
import React from "react";
import "semantic-ui-css/semantic.min.css";
import moment from "moment";

const Cards = ({ cloudFunction }) => {
  return (
    <Card color="green">
      <Card.Content>
        <Card.Header>{cloudFunction.id}</Card.Header>
      </Card.Content>
      <Card.Content extra>
        <Icon name="cog" /> Records: {cloudFunction.lastRunLoad}
        <br />
        <Icon name="cog" />
        {cloudFunction.lastRunMessage}
        <br />
        <Icon name="clock" /> Last Run:{" "}
        {moment(cloudFunction.lastRunTime.toDate().toString()).format(
          "DD/MM/YYYY HH:mm",
          true
        )}
        <br />
        <Icon name="angle double down" />
        Schedule: {cloudFunction.schedule}
      </Card.Content>
      <Card.Content extra>
        <div className="ui two buttons">
          <Button
            basic
            type="button"
            color="green"
            onClick={(e) => {
              e.preventDefault();
              window.open(cloudFunction.url.toString(), "_blank");
            }}
          >
            Cloud Function
          </Button>
        </div>
      </Card.Content>
    </Card>
  );
};

export default Cards;

Answer 1

查看 React 中的條件。 如果我理解正確，您可以執行以下操作：

{cloundFunctions.lastRunStatus ? (
  <Button
    basic
    type="button"
    color="green"
    onClick={(e) => {
      e.preventDefault();
      window.open(cloudFunction.url.toString(), "_blank");
    }}
  >
    Cloud Function
  </Button>
) : (
  <div>Something's wrong</div>
)