根据 React 组件中 api 的活动项目列表，将项目设置为禁用或活动 state

Question

从 api 我得到一个可用于过滤的按钮列表：

例如：

按钮2
按钮4
按钮5

假设我们总共有 5 个按钮。 button1和button3应该有一个禁用或非活动的 state（在 ui 中显示为灰色）并且在列表中可见：

按钮 1（禁用）
按钮2
按钮（禁用）
按钮
按钮

更新：

我让一切正常，请参阅我的工作示例。

Answer 1

渲染按钮时，您可以检查按钮是否在 api 的活动按钮列表中，并相应地应用 styles，如下所示：

    <button className={activeButtonList.find(el=> el === renderedButton) ? 'active' : 'disabled')}>SomeButton</button>

如果在按钮列表中找不到按钮，array.find 将返回 undefined 并将评估为“禁用”。 希望这可以帮助