我正在尝试在按钮上添加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>
元素,而不是将其写为按钮标签。