将 React 组件作为 prop 传递给另一个组件

Question

I am trying to pass complete parent component as props to its child component. Whereas, while trying to pass some data from parent to child, I imported the child into parent. So, how can I do that now in other way around? Any suggestions? As I want to re render Parent component upon some state change of child component. Example Added:

// Parent Component
import B from './B.js';

class A extends React.Component{
constructor(props, context){
        super(props, context);
         this.state = {
                 showB: false
         }
    }
onClick = () =>{
this.setState({ 
            showB: true
            });
}
render(){
return(
{
 this.state.showB ? <B /> : 
<div>
<Button onClick={this.onClick}>VIEW B </Button>
</div>
<h1>Some text</h1>
)
}
}

// Child Component

class B extends React.Component{
constructor(props, context){
        super(props, context);
         this.state = {
                 showA: false
         }
    }
onClick = () =>{
this.setState({ 
            showA: true
            });
}
render(){
return(
{
 this.state.showA ? <A /> : 
<div>
<Button onClick={this.onClick}>Back</Button>
</div>
<h1>Back to Component A</h1>
)
}

}

Answer 1

When you want to toggle between parent and child component, I recommend passing down the callback function from parent to child and access that function to navigate back to the parent component.

Your parent component should be this,

class A extends React.Component{
  constructor(props, context){
    super(props, context);
    this.state = {
      showB: false
    }
  }

  onClick = () =>{
    this.setState({ 
      showB: !this.state.showB    //This will negate the existing state
    });
  }

  render(){
    return(
      <>  //use Fragments / div here 
      {
        this.state.showB ? 
        <B click={this.onClick}/> //Provide callabck function here
        : 
        <div>
          <button onClick={this.onClick}>VIEW B </button>
          <h1>Some text</h1>
        </div>
      }
      </>
    )
  }
}

You child component should be this,

class B extends React.Component{
  render(){
    return( 
      <div>
        <button onClick={this.props.click}>Back</button>
        <h1>Back to Component A</h1>
      </div>
    )
  }
}

Demo