动态更改反应引导按钮的变体？

Question

如何动态更改 react-bootstrap 按钮的变体？ https://react-bootstrap.github.io/components/buttons/

// highlight button with correct answer
    var button = document.getElementsByTagName("button");
    for (var i = 0; i < button.length; i++) {
      if (button[i].innerHTML === this.state.question.answer) {
        //How to do that?
        react-bootstrap.Button btn = button[i];
        btn.variant = "success";
      }
    }
  }

谢谢和亲切的问候

Answer 1

您可以动态地将变体从父组件传递到此DynamicButton组件。

const DynamicButton = (props) => {
  return <Button variant={props.variant}>{props.content}</Button>;
}

这就是您可以使用此组件的方式。

<>
  <DynamicButton variant="primary" content="Primary" />
</>

请导入相应的组件。