如何在 ReactJS 中 add/change 将值 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) 中，我找到了以下示例代码，但无法 add/change 进度

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

但它显示为以前的（没有变化）。

如何add/change在ReactJS中value（将来可能increase/decrease）到进度条？

加个value就可以继续

提前致谢

Answer 1

根据您提供的 link 使用标准 SemanticUI（自 2018 年以来未更新）。

在这种情况下，您需要遵循进度条对象的 usage page 以按照语义 UI 的需要使用它。所有示例都使用 jQuery，因为它是语义 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, that has a proper implementation of Progress Bar 并且总体上最适合 React。

How to add/change progress value to the Progress Bar in Semantic UI (CSS) in ReactJS