Reactjs 从其他组件访问react组件的状态

我有下面的旋转器

import React, { Component } from 'react'
import './Spinner.scss'

export default class Spinner extends Component {
  constructor(props) {
    super(props);
    this.state = {showLoading: true};
  }

  render () {
    return (
      <div className="spinner">
        <div className="double-bounce1"></div>
        <div className="double-bounce2"></div>
      </div>
    )
  }
}

import React，{Component}来自“React”
导入“./Spinner.scss”
导出默认类微调器扩展组件{
建造师（道具）{
超级（道具）；
this.state={showLoading:true}；
}
渲染（）{
返回(
)
}
}

从其他组件中，我想显示或隐藏此微调器，以下是组件的代码：

import React, { Component } from 'react'

import RTable from '../../../components/RTable/RTable'

import Spinner from '../../../components/Spinner/Spinner'

import CsvDownload from '../containers/CsvDownloadContainer'
export default class Table extends Component {

  _renderBreadcrumb () {
    const { breadcrumb, handleBreadcrumbClick } = this.props
    return (
      <ol className="breadcrumb">
        {(breadcrumb || []).map(el => {
          return (
            <li key={el.datasetKey}>
              <a onClick={() => { handleBreadcrumbClick(el.granularity, el.datasetKey, el.datasetKeyHuman) }}>
                {el.datasetKeyHuman}
              </a>
            </li>
          )
        })}
      </ol>
    )
  }

  render () {
    const { datasetRows, columns, metadata, showLoading } = this.props

    return (
      <div className="row">
        <div className="col-sm-12">
          {this._renderBreadcrumb()}
          <RTable rows={datasetRows} columns={columns} metadata={metadata} />
          { this.props.showLoading ? <Spinner /> : null }
          <CsvDownload />
        </div>
      </div>
    )
  }

}

import React，{Component}来自“React”
从“../../components/RTable/RTable”导入RTable
从“../../../components/Spinner/Spinner”导入微调器
从“../containers/CsvDownloadContainer”导入CsvDownload
导出默认类表扩展组件{
_renderbreadcrump（）{
const{breadcrumb，handlereadcrumbclick}=this.props
返回(
{（面包屑| |[]）。地图（el=>{
返回(

{handlereadcrumbclick（el.granularity，el.datasetKey，el.datasetKeyHuman）}>
{el.datasetKeyHuman}

)
})}
)
}
渲染（）{
const{datasetRows，columns，metadata，showLoading}=this.props
返回(
{this.\u renderBreadcrumb（）}
{this.props.showLoading？：null}
)
}
}

如您所见，我尝试使用以下方法显示或隐藏微调器：

{ this.props.showLoading ? <Spinner /> : null }

{this.props.showLoading？：null}

但我总是变得不自信。请帮忙

你必须移动这个

constructor(props) {
  super(props);
  this.state = {showLoading: true};
}

到您的

组件，否则您可以从

的道具

访问

showLoading

，但它不会从任何地方传递

然后也改变

{ this.props.showLoading ? <Spinner /> : null }

{this.props.showLoading？：null}

到

{this.state.showLoading？：null}

要显示/隐藏

只需在

组件中调用

this.setState（{showLoading:Boolean}）

{ this.state.showLoading ? <Spinner /> : null }