состояния доступа реагировать компонент из другого компонента

Question

У меня есть следующая вертушка

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 } 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> 
    ) 
    } 

} 

, как вы можете видеть, что я пытаюсь показать или скрыть вертушку с помощью:

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

, но я всегда получаю undefinde. Помогите пожалуйста.

Answer 1

Вы должны переместить этот

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

<Table /> к вашему компоненту, в противном случае вы получаете доступ showLoading от <Table />'s props, но не передается из любой точки мира.

Затем измените также

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

в

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

Чтобы показать/скрыть <Spinner /> просто позвоните this.setState({ showLoading: Boolean }) в вашем <Table /> компоненте.