Can we call child component outside parent render function? - reactjs

Question

Hi I'm new in React is there a way to call child component from parent component outside the render function ?? below is my sudo code,
any idea !!!!!!
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

The answer is NO. You've your answer in your question.
Let me explain. A component can be called as a child component only if it is used in the parent component, meaning, the child component should be used inside the render() of parent component. So, you cannot call a child component out of parent's render.
To achieve you requirement, you can use state to re-render the child component.
<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>