Question

我想在组件之间进行切换。组件A和组件B有两个组件。组件A是组件B的父组件。我可以根据状态更改来管理从A到B的切换。同时，我想根据B组件中的某些状态更改切换回A组件。现在的问题是：

Q。我在A中导入了B组件。那么，我也应该在B中也导入A是孩子吗？听起来天真，但我是新手。

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

示例：组件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

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

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

这是工作示例：

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

在B中包含A和在A中包含B是一个坏主意，因为它们之间永远都不会相互嵌套。 A包括B，呈现A，那个呈现B，呈现A一个，依此类推...

Answer 2

您应该创建一个名为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>

}


}

切换React组件

2 个答案: