2017-08-10 2 views
0

Ich werde den gesamten Code für mein Problem benötigt, ich bin ratlos, wie zu lösen, ich habe viele Dinge ausprobiert, von denen keiner funktionierte. Reagieren Kinder Problem (Typoskript)

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 entweder zeigt JobBuilderModel.tsx oder JobBuilderSearch.tsx. Ich kann für jeden den Code zur Verfügung stellen, wenn nötig, aber die wichtigsten identifizieren Faktoren, die ich die Requisiten sind zu finden:

interface JobBuilderModelProps { 
    pageState: BuilderState;  
} 

interface JobBuilderSearchProps { 
    pageState: SearchState; 
} 

und auch die Klassennamen der Container Divs:

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

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

Der Grund, warum ich diese zur Verfügung gestellt habe, sind, weil ich muss herausfinden, welche der beiden reagierenden Komponenten angezeigt werden (und ich habe versucht, die beiden in irgendeiner Weise zu unterscheiden, um zu identifizieren, was tatsächlich angezeigt wird, aber vielleicht ist das nicht der richtige Weg), und basierend darauf muss eine Zeichenfolge in das JobPostingControl-Steuerelement übergeben werden, das sich ebenfalls auf der Seite befindet. Lassen Sie mich wissen, wenn weitere Details benötigt werden.

Antwort

1

Wenn ich Sie richtig verstehe, ist das Problem, wie man herausfinden kann, welche Art von Komponente in Kindern der JobBuilderOptimise Komponente ist. Wenn ja, können Sie die Eigenschaft type des Kindes verwenden, die Ihnen den Typ des betreffenden Kindes zurückgibt.

Dann können Sie testen, was innen nach Code ähnlich zu sehen:

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

} 
+0

Dies funktioniert, danke! Ich habe mich gefragt, warum .prototype hier erforderlich ist, weil nicht genug .type, um den Typ zu geben? Sehr geschätzt – csiscs

+0

Es funktioniert möglicherweise nicht, wenn das Kompilierungsziel von Typescript ES5 oder niedriger ist. Es gibt einige Diskussionen darüber hier: https://stackoverflow.com/questions/39387405/ using- instanceof-to-test-for-base-class-of-a-react-component – Amid