时间戳

首页 > 解决方案 > 通过单击按钮更改部分

javascript - 通过单击按钮更改部分

问题描述

我正在使用 reactstrap 制作一个网站，我有一个包含图表的部分和一个按钮，其功能是用另一个包含更多详细信息的图表替换所述图表。但是我正在努力制作一个具体的代码。

我已经尝试将图表放在一个单独的组件中，并通过在更改部分状态的按钮上使用 handleclick 函数来切换它的内容（使用“onclick”）

我真的对我的代码的清晰度没有信心，所以我尝试在小提琴中以更简单的方式重现我所做的事情

class hello extends React.Component {
    render() {
    return (
          <h2>hello</h2>
    );
    }
}

class bye extends React.Component {
    render() {
    return (
          <h2>goodbye</h2>
    );
    }
}

class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isToggleOn: true};
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState(prevState => ({
      isToggleOn: !prevState.isToggleOn
    }));
  }

  render() {
    return (
        <div>
        <div>
          {this.state.components[hello]}
        </div>
        <button onClick={this.handleClick}>
          switch
          {this.setState({components:[<bye />]})}
        </button>
      </div>
    );
  }
}

ReactDOM.render(
  <Toggle />,
  document.getElementById('root')
);

“toggle”组件中的 div 应该在组件“hello”和“bye”之间切换

实际上，应该显示的当前部分（“hello”）将在单击它们下方的按钮时被其他部分（“bye”）替换。

提前致谢。

标签： javascriptreactjs

解决方案

为什么不导入所有部分视图并根据条件有条件地渲染它们

{condition & <View1/>

推荐阅读