2017-08-10 163 views
0

我會提供所需的所有代碼,我的問題,我難以理解如何解決這個問題我嘗試了很多事情都沒有工作。反應兒童問題(打字稿)

export class JobBuilderOptimise extends React.Component<JobBuilderOptimiseProps & JobBuilderOptimiseDispatch> { 
    render() { 
     const { 
      jobPosting, 
      search, 
      previewByTemplate 
     } = this.props.pageState; 


     return (

      <div className="optimise-page"> 
       <Row> 
        <Col sm={7} > 
         <div className="optimise-panel"> 
          {this.props.children} 
         </div> 
        </Col> 

        <Col sm={5}> 
         <div className="preview-panel"> 
          <JobPostingControl jobDescription={jobPosting.data} isLoading={search.previewRequestState.isBusy || previewByTemplate.isBusy} leftSide={this.props.children}/> 
         </div> 
        </Col> 
       </Row> 
      </div> 
     ); 
    } 

this.props.children顯示JobBuilderModel.tsx或JobBuilderSearch.tsx。我可以提供用於每個碼如果neccessary但主要識別因素我能看到的是道具:

interface JobBuilderModelProps { 
    pageState: BuilderState;  
} 

interface JobBuilderSearchProps { 
    pageState: SearchState; 
} 

以及還有div容器的類名:

<div className="search-job-section"> 
... 
</div> 

<div className="model-job-section"> 
... 
</div> 

我已經提供了這些的原因是因爲我必須弄清楚兩個反應組分中的哪一個將被顯示(並且我一直試圖以任何方式區分這兩個反應組分,以便確定哪個實際顯示,但可能這不是正確的方式),以及基於此,必須將字符串傳遞到頁面上的JobPostingControl控件。讓我知道是否需要更多細節。

回答

1

如果我正確理解你的問題,那麼問題是如何找出JobBuilderOptimise組件的子內部是什麼類型的組件。如果是這樣 - 你可以使用兒童的type財產 - 這將返回你的孩子的類型。

然後,你可以測試一下,看看裏面的代碼類似於:

if((child.type as any).prototype instanceof JobBuilderModel) 
{ 

} 
+0

這工作,謝謝!我想知道爲什麼.prototype在這裏是必需的,因爲isnt .type足以給出類型?非常感謝 – csiscs

+0

如果您的打印機的編譯目標是ES5或更低,它可能無法正常工作。這裏有一些關於它的討論:https://stackoverflow.com/questions/39387405/using-instanceof-to-test-for-base-class-of-a-react-component – Amid