액세스 상태는 다른 구성 요소

Question

에서 구성 요소를 반응 I가 다음 회

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

및 기타 구성 요소에서 I 표시하거나 여기 회가 구성 요소의 코드 숨기고 싶은 :

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

당신은 그렇지 않으면 당신은 <Table />'s props에서 showLoading에 액세스하여 <Table /> 구성 요소에이

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

를 이동해야하지만, 어디에서 전달되지 않습니다.

그런 다음 당신의 <Table /> 구성 요소에 this.setState({ showLoading: Boolean }) 전화/숨기기 <Spinner />을 표시하려면

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

에도

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

변경합니다.