如何通过单击同级组件来显示/隐藏组件中的组件

Question

我有一个父组件“ app.js”，其中包含诸如标题和图表之类的子组件。图表组件有两个子组件（图表1和图表2）在标题上，我有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>

Chart.js

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

我不确定这是否是正确传递状态和函数的正确方法，但chart1显示在开始处，而chart2隐藏，因此传递状态按我的假设工作正常！

Answer 1

我宁愿不创建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>
    );
  }
}

Header.js

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

Chart.js

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

希望这会有所帮助！

Answer 2

据我所知，您需要进行以下更改：

header.js

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

Chart.js

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

并将适当的道具传递到Header组件而不是onClick

toggleHiddenChart1={() => this.isHiddenChart1}
toggleHiddenChart2={() => this.isHiddenChart2}

Answer 3

我建议使用单一状态来存储显示哪个图表，因为

• 更具扩展性，您可以轻松扩展到更多图表选项
• 由于两个图表是互斥的，即任何时候都只能显示一个，因此您实际上是在复制信息，这不是一个好习惯。如果chart1被自动隐藏，则表明chart2正在显示。
• 更少的代码！

export default class App extends Component {
  constructor (props) {
    super(props)
    this.state = { chartId: 1 }

    this.toggleChart = this.toggleChart.bind(this)
  }

  toggleChart (chartId) {
    this.setState({
      chartId: chartId
    })
  }

  render(){
   return (
    <React.Fragment>
      <Link to="#" onClick={_ => toggleChart(1)}> Chart1 </Link>
      <Link to="#" onClick={_ => toggleChart(2)}> Chart2 </Link>
      <Chart chartId={this.state.chartId} />
    </React.Fragment>
  );
  }
}

export default ({ chartId }) => {
   switch(chartId) {
      case 1:
        return <Chart1 />
      case 2:
        return <Chart2 />
      default:
        throw new Error('invalid chart id')  

   }
}