如何根据Firebase的数据向按钮添加条件(颜色、文本)

Question

在我的组件中，我试图在按钮上设置条件。我在lastRunStatus {cloundFunctions.lastRunStatus}的Firebase集合中有一个布尔条件，如果是真的，我就是为了保持绿色并说‘condition’，如果它是假的，我希望它变成红色并说‘错误的东西’。

任何提示、指针或代码都将受到高度赞赏:)

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

看看有反应的条件。如果我正确理解你的话，你可以这样做：

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