我想使用 react 和 javascript 根據可重用組件中的條件顯示文本。
我想做什么？
我有一個可重用的組件 Bar，如下所示，
const Bar = ({
label,
indeterminate,
showValue = !indeterminate,
value,
max = 100,
...rest
}: BarProps) => (
<BarWrapper {...rest}>
<Wrapper>
<Progress
value={value}
max={max}
/>
{indeterminate && <span />}
{showValue && (
<span>
{value} <Unit>%</Unit>
</span>
)}
</Wrapper>
{label && <Label>{label}</Label>}
</BarWrapper>
);
我在其他幾個組件中使用了這個 Bar 組件。
現在有一個組件“ParentComponent”使用這個 Bar 組件。但在這里它不想用 % 顯示價值。相反，它想顯示限制/總值。所以我添加了這樣的代碼，
const ParentComponent = () => {
const limit = "10";
const total= "15";
return(
<Bar
showCompleted
limit={limit}
total={total}
/>
);
}
我已經修改了 Bar 組件以顯示限制/總計而不是顯示百分比值。
const Bar = ({
label,
indeterminate,
showCompleted = !indeterminate,
limit,
total,
showValue = !indeterminate,
value,
max = 100,
...rest
}: BarProps) => (
<BarWrapper {...rest}>
<Wrapper>
<Progress
value={value}
max={max}
/>
{indeterminate && <span />}
{showValue && (
<span>
{value} <Unit>%</Unit>
</span>
)}
{showCompleted && (
<span>{limit}/{total}
</Wrapper>
{label && <Label>{label}</Label>}
</BarWrapper>
);
但是上面的代碼同時顯示了百分比值和限制/總數。我怎樣才能解決這個問題。有人可以幫我解決這個問題嗎？謝謝。
uj5u.com熱心網友回復：
您可以執行以下操作（兩個版本來說明附加條件。不確定我是否理解您要實作的邏輯，但您可以適當地修改標志）。如果您擁有value或completed value（不能同時擁有 - 我認為這是您正在努力實作的），那就是解決方案。
這樣你就不需要 2 個標志 ( showValue, showCompletedValue) - 只需要一個。如果通過 showCompletedValue 道具，它會顯示第一個（限制/總數）。如果省略，它將顯示第二個（單位 %）。
{showCompletedValue ? (
<span>{limit}/{total}</span>
) : (
<span>{value} <Unit>%</Unit></span>
)}
// Another option if you need to combine 2 flags
{(showCompletedValue && !indeterminate) ? (
<span>{limit}/{total}</span>
) : (
<span>{value} <Unit>%</Unit></span>
)}
第二個例子是它必須滿足兩個條件的情況。
uj5u.com熱心網友回復：
const ParentComponent = () => {
const limit = "10";
const total= "15";
return(
<Bar
showCompletedValue <--- update this prop.
limit={limit}
total={total}
/>
);
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/397845.html
標籤：javascript 反应 打字稿