React.js 为唯一 ID 和每个按钮禁用的映射数组样式

Question

我需要每个问题按钮在单击时被禁用。我还想 设计每个问题按钮的样式 。我已经为这个问题寻找了几个答案，但一无所获。在这种情况下我不太了解 React，我应该使用 useEffect 还是 children.props？如果您有任何解决方案，请告诉我。

Demo

Answer 1

您的按钮状态已可用于每个按钮，您只需使用状态和禁用按钮。

{/* Question buttons */}
{buttons.map((button) => (
  <button key={button.id} disabled={button.clicked} onClick={() => buttonClickHandler(button.id)}>
    {button.label}
  </button>
))}

关于单独设置按钮样式，您可以为每个按钮创建一个类名，并根据它设置按钮样式：

<button className={'button-' + button.id}>

现在从 css 应用颜色：

.button-01 { background: pink; }

第二种方法可能是为状态中的每个按钮创建样式，并从那里使用它。

<button style={button.style}>

React.js 为唯一 ID 和每个按钮禁用的映射数组样式

React.js Map Array style for a unique id and each button disabled

arrays

reactjs

react-functional-component