Javascript 将反应组件作为道具传递给另一个组件

我试图将完整的父组件作为道具传递给它的子组件。然而，在尝试将一些数据从父级传递到子级时，我将子级导入到父级。那么，我现在如何以其他方式做到这一点呢？有什么建议吗？因为我想在子组件的某些状态更改时重新呈现父组件。 添加的示例：

// 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>
)
}

}

//父组件
从“/B.js”导入B；
类扩展了React.Component{
构造函数（道具、上下文）{
超级（道具、背景）；
此.state={
B:错
}
}
onClick=（）=>{
这个.setState（{
B:是的
});
}
render（）{
返回(
{
this.state.showB？：
视图B
一些文本
)
}
}
//子组件
类扩展了React.Component{
构造函数（道具、上下文）{
超级（道具、背景）；
此.state={
昭和：错
}
}
onClick=（）=>{
这个.setState（{
昭和：是的
});
}
render（）{
返回(
{
这个.state.showA？：
返回
返回组件A
)
}
}

当您想要在父组件和子组件之间切换时，我建议将回调函数从父组件传递给子组件，并访问该函数以导航回父组件

您的父组件应该是这样的

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>
      }
      </>
    )
  }
}

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

A类扩展了React.Component{
构造函数（道具、上下文）{
超级（道具、背景）；
此.state={
B:错
}
}
onClick=（）=>{
这个.setState（{
showB:！this.state.showB//这将否定现有状态
});
}
render（）{
返回(
//在这里使用Fragments/div
{
这是什么？
//在这里提供callabck函数
: 
视图B
一些文本
}
)
}
}

您的子组件应该是这样的

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>
      }
      </>
    )
  }
}

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

B类扩展了React.Component{
render（）{
报税表（
返回
返回组件A
)
}
}

---

如果孩子需要通知其父母某件事，请将一个回调作为道具从父母传递给孩子。@JonSharpe也许孩子不需要通知任何事情。我的孩子组件中有一个后退按钮。单击它，我只想再次呈现父母组件。因为，最初单击父母如何将我带到孩子组件。什么你不是说“也许”？您能提供一个更具体的上下文吗？正如@jornsharpe所说，您可以使用callback，但如果您只想在单击按钮时呈现父组件，那么您可以使用react router的BrowserRouter-dom@jonrsharpe添加了示例。这是我想要的行为。所以我想知道如何访问父组件，即内部chil根据我的理解，我只是在学习react。我假设，也许我需要将父组件作为道具传递给它的子组件。