如何在反应中使用 jsx 元素 innerHTML

Question

我一直在尝试制作一个登录表单，当您点击注册时，注册按钮会变成一个加载图标，如果它从服务器收到 false 响应，它会再次加载按钮而不是加载微调器，但我遇到一个问题，当它应该删除加载微调器并再次显示注册按钮（使用 innerHTML）时，它只显示 [object Object] 而不是按钮，所以这里是声明我曾经渲染按钮，微调器：

     onSubmit = () => {
            document.getElementById('error-alert').innerHTML = "";
            document.getElementById('sumbit-btn').innerHTML = ` //rendering the loading spinner
            <span class="btn btn-light border-1 border-dark mdi mdi-loading mdi-spin mdi-24px"></span>`;
            fetch("my server link here", {
              method: 'post',
              headers: { 'Content-Type': 'application/json' },
              body: JSON.stringify({
                email: this.state.email,
                password: this.state.password,
                name: this.state.name
              })
            })
              .then(response => response.json())
              .then(user => {
                if (user.id) {   // if the input is correct (response true from the server)
                  this.props.loadUser(user)
                  this.props.onRouteChange('home');
}



 else {  //if the response is false from the server


    ///////////////   this is the innerHTML i mean:   //////////
                  document.getElementById('sumbit-btn').innerHTML =
                    <div
                      className="btn btn-light border-1 border-dark"
                      onClick={this.onSubmit}
                    >Register
                  </div>
    ///////////////////////////////////////////////////////////

                }
              })
          }

请注意，此代码块在 render(){}

之外

Answer 1

我认为最简单的方法是在状态中存储一个布尔值，然后在渲染中生成一个三元值。根据您的需要更改布尔值。

 onSubmit = () => {
        document.getElementById('error-alert').innerHTML = "";
        this.setState({showLoading: true});
        <span class="btn btn-light border-1 border-dark mdi mdi-loading mdi-spin mdi-24px"></span>`;
        fetch("my server link here", {
          method: 'post',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({
            email: this.state.email,
            password: this.state.password,
            name: this.state.name
          })
        })
          .then(response => response.json())
          .then(user => {
            if (user.id) {   // if the input is correct (response true from the server)
              this.props.loadUser(user)
              this.props.onRouteChange('home');
 } else {
   this.setState({showLoading: false});
}
render(){
   return(
     <div>{show ? 
                    <Loading/> 
                    :
                    <div
                      className="btn btn-light border-1 border-dark"
                      onClick={this.onSubmit}
                    >Register
                  </div>
          }
  )
}

如何在反应中使用 jsx 元素 innerHTML

How to innerHTML a jsx element on react

javascript

innerhtml

jsx

reactjs