ReactJS Render Component

Question

Ich bin neu zu reacjts. Ich möchte eine Komponente von einer anderen Komponente erneut rendern. Zum Beispiel habe ich einfügen und zeigen Komponente. Ich möchte die Show-Komponente nach dem Klicken auf die Schaltfläche "Senden" der Einfügekomponente erneut rendern.

anzeigen Bestandteil:

import React from 'react';   
import Fetch from 'react-fetch'; 
import styler from 'react-styling' 

class Show extends React.Component {    
    render() { 
    return ( 
     <div> 
     <h1>Show Component </h1> 
     </div>     
    ); 
    } 
}  
export default Show; 

Komponente einfügen:

import React from 'react';   
import Fetch from 'react-fetch'; 
import styler from 'react-styling' 

class Insert extends React.Component {  
    handleSubmit(event) { 
      //Some code 
    } 
    render() { 
    return (
    <form onSubmit={this.handleSubmit}> 

    <label >name</label> 
    <input type="text" name="name" value={this.state.name} onChange=  
    {this.handleInputChange} />  
    <input type="submit" value="Submit" />  
    </form>  
); 
    } 
}  
export default Show; 

Jetzt will ich anrufen oder neu rendern oder Show-Komponente aktualisieren, wenn i Schaltfläche Einfügen Komponente einreichen klicken. Danke im Voraus.

Answer 1

Sie müssen die Einfügekomponente als Reaktionskind der Show-Komponente verwenden, um zwischen zwei Komponenten zu kommunizieren. Das Komponenten-Rendering kann durch Ändern des Status für die Elternkomponente und Ändern der Requisiten für die Kindkomponente durchgeführt werden. In Ihrem Fall wird keine der Bedingungen erfüllt. Sie können dies auch über das flux-Framework erreichen, wo Sie einen Listener zu einem Flux Store hinzufügen und eventListener auf Ihrer Komponente hinzufügen können, um mit Änderungen im Store erneut zu rendern.

Bevor ich zu all dem gehe, schlage ich vor, dass Sie die React-Konzepte ausführlicher durchgehen, um Zustand und Requisitenverhalten zwischen Komponenten zu verstehen.