Können wir Child-Komponente außerhalb der übergeordneten Renderfunktion aufrufen?

Question

Hallo, ich bin neu in React gibt es eine Möglichkeit, Kindkomponente von der Elternkomponente außerhalb der Renderfunktion aufzurufen ?? Unten ist mein Sudo-Code,

keine Idee !!!!!!

var Parent React.createClass({ 

someFunction: function(){ 
    //can I call Child component from here on every click 
    // as this will rerender the child component only on each click 
    // leaving parent component unrendered 
}, 

render: function(){ 


} 
}) 

Answer 1

Die Antwort ist NO. Du hast deine Antwort in deiner Frage.

Lassen Sie mich erklären. Eine Komponente kann nur als child Komponente bezeichnet werden, wenn sie in der Komponente parent verwendet wird, dh die Komponente child sollte innerhalb der Komponente render() der Komponente parent verwendet werden. Sie können also keine untergeordnete Komponente aus dem übergeordneten Render abrufen.

Um Ihre Anforderung zu erfüllen, können Sie state verwenden, um die untergeordnete Komponente erneut zu rendern.

<script src="https://unpkg.com/babel-core@5.8.38/browser.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="example"></div> 
 
<script type="text/babel"> 
 

 
    const Child = React.createClass({ 
 
    render() { 
 
     return <h1>Hello, world!</h1> 
 
    } 
 
    }) 
 

 
    const Parent = React.createClass({ 
 
    getInitialState() { 
 
     return { 
 
     renderChild: false 
 
     } 
 
    }, 
 
    onClick(){ 
 
     this.setState({ 
 
     renderChild: !this.state.renderChild 
 
     }) 
 
    }, 
 
    render(){ 
 
     return <div> 
 
     <button onClick={this.onClick}>{this.state.renderChild ? 'Hide' : 'Show'} Child</button> 
 
     { 
 
      this.state.renderChild && 
 
      <Child /> 
 
     } 
 
     </div> 
 
    } 
 
    }) 
 

 
    ReactDOM.render(<Parent />, document.getElementById('example')); 
 
</script>