Question

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

我尝试将图表放置在单独的组件中，并通过使用按钮上的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”）替换，然后单击它们下面的按钮。

提前谢谢。

Answer 1

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

{condition & <View1/>

Answer 2

您的代码中有一些错误。这是一个使用条件渲染实现您想要的功能的示例：

import React, { useState } from "react";
import ReactDOM from "react-dom";

const Hello = () => {
  return <h2>hello</h2>;
};

const Bye = () => {
  return <h2>bye</h2>;
};

const App = () => {
  const [toggled, setToggled] = useState(true);

  const handleClick = () => {
    setToggled(!toggled);
  };

  const render = () => {
    if (toggled) {
      return <Hello />;
    }

    return <Bye />;
  };

  return (
    <div>
      <button onClick={handleClick}>toggle</button>
      {render()}
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById("root"));

Answer 3

如果只想通过单击按钮在两个组件之间切换，则可以使用条件渲染。将您的render方法更改为此：

render(){
    return (
        <div>
            {this.state.isToggleOn?<Hello />:<Bye />}
            <button onClick={this.handleClick}>Switch</button>
        </div>
 }

还请保持组件名称的首字母大写，否则可能会抱怨。并且使用基于Class的组件已经过时了。 Hooks现在很热门。因此，尝试使用更多的Functional组件。

注意：我的答案假设您正在使用babel presets来转译jsx和es6语法。如果不是，请查看@Colin的答案。它还使用钩子。

Answer 4

有很多方法可以做到：

使用条件运算符：

{ this.state.isToggleOn?<Hello/>:<Bye/>  }

使用条件：

render() {

  let chart;

  if(this.state.isToggleOn) {
   chart = <Hello/>;
  } else {
   chart = <Bye/>;
  }

  return ( <div> {  chart } </div>);
}

3您也可以使用开关盒进行条件渲染。由于条件为真或假，因此此处不太适合。

通过单击按钮更改部分

4 个答案: