Reactstrap - 如何在按鈕內正確渲染微調器？

Question

我正在嘗試使用 Reactstrap 中的按鈕和微調器來實現這樣的目標

<Button color="primary" disabled>
  Loading<Spinner style={{ width: '0.5rem', height: '0.5rem' }} type="grow" color="light" /><Spinner style={{ width: '0.5rem', height: '0.5rem' }} type="grow" color="light" /><Spinner style={{ width: '0.5rem', height: '0.5rem' }} type="grow" color="light" />
</Button>

但是，當我在代碼中執行此操作時，按鈕中的微調器顯示為 [object Object]。 知道如何讓它渲染為微調器嗎？ 我嘗試將微調器括在括號和花括號中，但我嘗試過的任何方法似乎都不起作用。

import React, { Component } from 'react';
import { Form, FormGroup, Col, Button, Spinner } from 'reactstrap';

export class MyComp extends Component {
  static displayName = MyComp.name;

  constructor(props) {
    super(props);
    this.state = {
      processing: false
    }
  }

  showProcessing = () => {
    this.setState({ processing: true });
  }

  hideProcessing = () => {
    setTimeout(this.setState({ processing: false }), 2000);
  }

  submitHandler = event => {
    event.preventDefault();

    event.target.className += " was-validated";

    const isValid = event.target.checkValidity();

    if (isValid) {
      const data = new FormData(event.target);
      let currentComponent = this;

      fetch('/api/form-submit-url', {
        method: 'POST',
        body: data,
      })
        .then(function (response) {
          //resrtform
          currentComponent.hideProcessing();
          return response.json();
        })
        .then(function (data) {
          console.log(data);
        })
        .catch(function (err) {
          currentComponent.hideProcessing();
          console.log("Something went wrong!", err);
        });
    }
  }

  render() {
    return (
      <Form onSubmit={this.submitHandler} noValidate action="/someurl" method="POST">

        <FormGroup row>
          <Col sm={6} />
          <Col sm={4}>
            <Button color="primary" onClick={this.showProcessing} >
              {!this.state.processing ? 'Sumbit' : 'Loading..' + (<Spinner style={{ width: '0.7rem', height: '0.7rem' }} type="grow" color="light" />)}
            </Button>
          </Col>
        </FormGroup>

      </Form>
    );
  }
}

Answer 1

您正在向 JSX 組件添加字符串。 以下代碼有效

<Button color="primary" onClick={this.showProcessing}>
  {!this.state.processing ? "Sumbit" : "Loading.."}
  {this.state.processing ? (
    <Spinner
      style={{ width: "0.7rem", height: "0.7rem" }}
      type="grow"
      color="light"
    />
  ):null}
</Button>

Answer 2

根據@VarunDevPro 回答，您可以使用size="sm"代替style並設置width/height

<Button color="primary" onClick={this.showProcessing}>
<span>Submit</span> // default text
  {this.state.processing ? (
    <Spinner
      size="sm"
      type="grow"
      color="light"
    />
  ) : null }
</Button>