如何在 ReactJS 中的語義 UI (CSS) 中向進度條添加/更改進度值

Question

我正在嘗試在 React 應用程序中添加Progress Bar 。

我正在使用語義 CSS： <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />

從文檔（ https://semantic-ui.com/modules/progress.html#/definition ）中，我發現以下示例代碼但無法添加/更改進度

<div class="ui green progress">
    <div class="bar"></div>
</div>

我嘗試了什么：

<div class="ui green progress" dataValue="1" dataTotal="100" id="progress">
    <div class="bar"></div>
</div>

但它顯示為以前的（沒有變化）。

如何在 ReactJS 的進度條中添加/更改進度value （將來可能會增加/減少）？

添加一個value足以繼續

提前致謝

Answer 1

根據您提供的鏈接，您使用的是標准SemanticUI （自 2018 年以來未更新）。

在這種情況下，您需要按照進度條 object 的使用頁面來按照語義 UI 的需要使用它。 所有示例都使用 jQuery，因為它是 Semantic UI 的先決條件。

例如，您可以更新data-percent

<div class="ui progress" data-percent="74" id="example">
  <div class="bar"></div>
  <div class="label">74% Funded</div>
</div>

然后打電話

$('#example').progress();

或者你可以直接通過 JS 更新

$('#example').progress({
  percent: 22
});

另一個解決方案，因為您使用的是 React，所以轉移到Semantic UI React ，它具有進度條的正確實現，並且總體上最適合 React。