Bootstrap 4在Reactjs中的按钮上加载微调器

Posted 2023-02-14

我正在尝试在按钮上添加Bootstrap 4 Loading Spinner。我的按钮代码如下所示

<button className="btn-wide btn-pill btn-shadow btn-hover-shine btn btn-primary btn-lg"
                          onClick=this.handleSubmit>
   
      this.state.toggle && this.props.value !== 'error'
           ? '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>'
    : ''
   
   Create Account
  </button>

我将得到如下输出

我将Bootstrap 4包含在index.html文件中，如下所示

<title>React App</title>
    <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">

  </head>

答案

<button className="btn-wide btn-pill btn-shadow btn-hover-shine btn btn-primary btn-lg"
                      onClick=this.handleSubmit>
   
      this.state.toggle && this.props.value !== 'error' &&
           <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
   
   Create Account
</button>

这将让React知道您要呈现<span>元素，而不是将其写为按钮标签。