时间戳

首页 > 解决方案 > 如何通过单击同级组件在反应中显示/隐藏组件

reactjs - 如何通过单击同级组件在反应中显示/隐藏组件

问题描述

我有一个父组件“app.js”，其中包含标题和图表等子组件。图表组件有两个子组件 (chart1 & chart2) 在标题上，我有 2 个可点击的链接，分别命名为 (chart1, chart2)。我的目标是通过单击标题链接“chart1 & chart2”来显示/隐藏每个图表。据我了解，我需要创建两个状态；父级中的 isHiddenChart1 和 isHiddenChart2 并将它们传递给标题和图表组件。另外，我需要创建两个函数；每次单击链接时都会更改状态的 toggleHideChart1 和 toggleHideChart2，并将这些函数传递给 Header 组件。但是，我尝试这样做，但是当单击标题中的链接时，没有任何变化！

以下是 app.js 代码

export default class App extends Component {
  constructor (props) {
    super(props)
    this.state = {
      isHiddenChart1: false,
      isHiddenChart2: true
    }
    this.toggleHiddenChart1 = this.toggleHiddenChart1.bind(this)
    this.toggleHiddenChart2 = this.toggleHiddenChart2.bind(this)
  }
  toggleHiddenChart1 () {
    this.setState({
      isHiddenChart1: !this.state.isHiddenChart1
    })
  }
  toggleHiddenChart2 () {
    this.setState({
      isHiddenChart2: !this.state.isHiddenChart2
    })
  }
render(){
  return (
    <React.Fragment>
      <Header 
              isHiddenChart1={this.state.isHiddenChart1}
              isHiddenChart2={this.state.isHiddenChart2}
              onClick={() => this.isHiddenChart1}
              onClick={() => this.isHiddenChart2}


      />
     <Chart 
            isHiddenChart1={this.state.isHiddenChart1}
            isHiddenChart2={this.state.isHiddenChart2}

     />
</React.Fragment>


  );
}
}

header.js

<Link to="#" onClick={()  => this.props.toggleHiddenChart1}> Chart1 </Link>
<Link to="#" onClick={()  => this.props.toggleHiddenChart2}> Chart2 </Link>

图表.js

{!this.props.isHiddenChart1 && <Chart1 />}
{!this.props.isHiddenChart2 && <Chart2 />}

我不确定这是否是在反应中传递状态和函数的正确方法，但是chart1 显示在开头，而chart2 被隐藏了，所以传递状态就像我假设的那样工作正常！

标签： reactjs

解决方案

我宁愿不创建 2 个单独的状态变量，我只会创建一个指定哪个图表处于活动状态的单一状态变量。

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      activeChart: null,
    };
    this.toggleChart = this.toggleChart.bind(this);
  }
  toggleChart(chart) {
    this.setState(prevState => ({
      activeChart:chart,
    });
  }

  render() {
    return (
      <React.Fragment>
        <Header
          activeChart={this.state.activeChart}
          onClick={this.toggleChart}
        />
        <Chart
          activeChart={this.state.activeChart}
        />
      </React.Fragment>
    );
  }
}

页眉.js

<Link to="#" onClick={()  => this.props.toggleChart("chart1")}> Chart1 </Link>
<Link to="#" onClick={()  => this.props.toggleChart("chart2")}> Chart2 </Link>

图表.js

switch(this.state.activeChart) {
 case "chart1":
   return <Chart1 />
 case "chart2":
   return <Chart2 />
 default: 
   return null;
}

希望这可以帮助！

推荐阅读