如何在反应时对一个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

我认为最简单的方法是在状态中存储一个布尔值，然后在渲染中创建一个三元组。根据您的需要更改布尔值。&nbsp;onSubmit = () => {&nbsp; &nbsp; &nbsp; &nbsp; document.getElementById('error-alert').innerHTML = "";&nbsp; &nbsp; &nbsp; &nbsp; this.setState({showLoading: true});&nbsp; &nbsp; &nbsp; &nbsp; <span class="btn btn-light border-1 border-dark mdi mdi-loading mdi-spin mdi-24px"></span>`;&nbsp; &nbsp; &nbsp; &nbsp; fetch("my server link here", {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; method: 'post',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; headers: { 'Content-Type': 'application/json' },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; body: JSON.stringify({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; email: this.state.email,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; password: this.state.password,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name: this.state.name&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .then(response => response.json())&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .then(user => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (user.id) {&nbsp; &nbsp;// if the input is correct (response true from the server)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.props.loadUser(user)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.props.onRouteChange('home');&nbsp;} else {&nbsp; &nbsp;this.setState({showLoading: false});}render(){&nbsp; &nbsp;return(&nbsp; &nbsp; &nbsp;<div>{show ?&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Loading/>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; :&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; className="btn btn-light border-1 border-dark"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onClick={this.onSubmit}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; >Register&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; )}