问通过单击按钮进行节更改
EN

Stack Overflow用户

提问于 2019-05-17 09:52:02

回答 4查看 278关注 0票数 0

我正在制作一个网站反应反应带，我有一个部分，其中包含图表和按钮，其功能是取代上述图表与另一个图表包含更多的细节。然而，我正在努力制定一个具体的代码。

我尝试将图表放在一个单独的组件中，并通过在按钮上使用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')
);

“切换”组件中的div应该在组件"hello“和”拜“之间切换。

实际上，应该显示的当前部分("hello")将被另一个部分(“拜”)替换为单击它们下面的按钮。

提前谢谢。

javascript

reactjs

回答 4

Stack Overflow用户

回答已采纳

发布于 2019-05-17 10:04:27

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

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

此外，将组件的名称保留为第一个字符，大写或react可能会引起抱怨。而使用基于Class的组件已经过时了。Hooks是现在最热门的东西。因此，尝试使用更多的Functional组件。

注意:我的答案假设您使用babel presets来转换jsx和es6语法。如果没有，去看看科林的答案。它也使用钩子。

票数 1

Stack Overflow用户

发布于 2019-05-17 09:57:23

为什么不导入所有的部分视图并根据条件有条件地呈现它们？

{condition & <View1/>

票数 1

Stack Overflow用户

发布于 2019-05-17 09:58:37

您的代码中有一些错误。下面是一个使用条件呈现来做您想要的事情的示例：

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"));