如何根据来自 Firebase 的数据向按钮添加条件（颜色、文本）

Question

我正在尝试在我的组件中为按钮设置条件。我的 Firebase 集合中有一个布尔条件，用于 lastRunStatus {cloundFunctions.lastRunStatus}，如果它是真的，我会保持绿色并说 'Cloud Function' 如果它是假的，我希望它变成红色并说“出了点问题” .

任何提示、指示或代码将不胜感激:)

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>
)

如何根据来自 Firebase 的数据向按钮添加条件（颜色、文本）

How to add conditions ( colour, text) to button based on data from Firebase

javascript

jsx

conditional-statements

firebase

reactjs