切换 React 组件

Question

我想在组件之间进行切换。有两个组件，比如说组件 A 和组件 B。组件 A 是组件 B 的父组件。我可以根据一些状态更改来管理从 A 到 B 的切换。同时，我想在 B 组件的一些状态变化的基础上切换回组件 A。现在，问题是：

问。我在 A 中导入 B 组件。那么，我应该在 B 中导入 A 还是 child ？ 听起来可能很幼稚，但我是初学者。

同时，我不确定这是否是一个好方法？有什么好的处理方法。我已经看到了一些问题，用于切换涉及第三个组件的位置，并将其余两个组件导入其中。 请建议我处理它。

示例： 组件A

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>I am component A</h1>
)
}

}

组件 B

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}>VIEW A </Button>
</div>
<h1>I am component B</h1>
)
}

}

Answer 1

您应该创建一个名为 C 的父组件，在该组件中您可以同时导入 A 和 B 并使用相同的逻辑来显示 A 还是 B。所以它应该类似于

import B from './B.js';
import A from './A.js';

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

}
{
 this.state.showB ? <B /> : (
<div>
<Button onClick={this.onClickB }>VIEW B </Button>
</div>
)

}

}

替代方法 如果您不想创建另一个组件。您可以做的是，当您显示 B 时，您不会渲染任何其他 A 组件。只有一个按钮会在这两种情况下呈现以切换组件。可能是这样的：

import B from './B.js';

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

}


}

Answer 2

您应该将 onClick 函数传递给您的按钮，而不是状态。

...
<Button onClick={this.onClick}>VIEW A </Button>
...

这是工作示例：

https://codesandbox.io/s/jovial-sanderson-ntu69

在 B 中包含 A 和在 A 中包含 B 是个坏主意，因为它们之间的嵌套永无止境。 A 包括 B，它渲染 A，那个渲染 B，那个渲染 A 等等......