我正在嘗試在我的組件中為按鈕設定條件。我的 Firebase 集合中有一個用于 lastRunStatus {cloundFunctions.lastRunStatus} 的布爾條件，如果它是真的，我會保持綠色并說“云功能”，如果它是假的，我希望它變紅并說“有問題”。
任何提示、指標或代碼將不勝感激:)
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;
uj5u.com熱心網友回復：
查看 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>
)
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/434106.html
標籤：javascript 反应 火力基地 条件语句 jsx
上一篇：反應點擊處理程式不更新變數