Ärger Komponente Einsteigen SetTimeout Render

Question

nicht sicher, was ich falsch mache, aber meine Komponente in SetTimeout gewickelt ist nicht auf das DOM gemacht zu werden:

const ContentMain = Component({ 
    getInitialState() { 
     return {rendered: false}; 
    }, 
    componentDidMount() { 
     this.setState({rendered: true}); 
    }, 
    render(){ 
     var company = this.props.company; 

     return (

      <div id="ft-content"> 
       {this.state.rendered && setTimeout(() => <Content company={company}/>,3000)} 
      </div> 
     ) 
    } 
}) 

Answer 1

ich dies tippe funktioniert nicht, weil die render Methode benötigt alle seine Eingabe gleichzeitig konsumiert werden und es kann andere Komponenten im Nachhinein nicht wiedergeben, gibt es einen bestimmten Fluss zu Reagieren. Ich würde vorschlagen, das Timeout von render Methode zur Logik willen sowieso zu trennen, und tun es in componentDidMount wie folgt aus:

const ContentMain = Component({ 
    getInitialState() { 
     return {rendered: false}; 
    }, 
    componentDidMount() { 
     setTimeout(() => { 
      this.setState({rendered: true}); 
     }, 3000); 
    }, 
    render(){ 
     if (!this.state.rendered) { 
      return null; 
     } 

     var company = this.props.company; 

     return (
      <div id="ft-content"> 
       <Content company={company}/> 
      </div> 
     ) 
    } 
}) 

Ändern der Zustand löst die Methode machen.

Eine Randnotiz - selbst wenn Ihr ursprünglicher Ansatz funktionierte, würden Sie die Komponente jedes Mal flackern sehen, wenn sie nach dem ersten Laden gerendert wurde. Schätze, du würdest das nicht wollen :)