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

Question

我正试图在组件中的Button上设置条件。我的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>
)