无法在 React 中使用条件正确渲染答案

【问题标题】：Cannot render correctly using conditionals in React无法在 React 中使用条件正确渲染
【发布时间】：2019-07-21 09:59:29
【问题描述】：

有没有一种正确的方式在 React 中使用我还没有弄清楚的条件进行渲染？我已经花了一些时间，但不明白为什么它只呈现 'Standard' 。 Standard、Filled、Premium 组件中的每一个都只是简单地呈现一些 HTML... 这是我编码的内容。

 import React, { Component } from "react";
import { PropTypes } from "prop-types";
import { connect } from "react-redux";
import Standard from "./Standard";
import Filled from "./Filled";
import Premium from "./Premium";

class Plans extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedplan: ""
    };
    this.onClick = this.onClick.bind(this);
  }

  onClick = e => this.setState({ selectedplan: e.target.name });

  componentDidMount() {
    if (this.props.auth.isAuthenticated) {
      this.props.history.push("/dashboard");
    }
  }
  render() {
    var plan = this.state.selectedplan;
    let content;
    if (plan === "standard") {
      content = <Standard />;
    } else if (plan === "filled") {
      content = "Testing... worked.?";
    } else if (plan === "premium") {
      content = <Premium />;
    } else {
      content = (
        <div className="lead text-center">Select a plan to view more</div>
      );
    }
    return (
      <div>
        <div className="row">
          <div
            className="col-sm-4 card card-info text-center justify-content-center"
            style={{ margin: "auto" }}
          >
            <h3 onClick={this.onClick} name="standard">
              Standard
            </h3>
            <ul>
              <li />
            </ul>
          </div>
          <div
            className="col-sm-4 card text-center justify-content-center"
            style={{ margin: "auto" }}
          >
            <h3 name="filled" onClick={this.onClick}>
              Feature-Filled
            </h3>
            <ul>
              <li />
            </ul>
          </div>
          <div
            className="col-sm-4 card card-info text-center justify-content-center"
            style={{ margin: "auto" }}
          >
            <h3 name="premium" onClick={this.onClick}>
              Super Premium
            </h3>
            <ul>
              <li />
            </ul>
          </div>
        </div>
        <hr />
        <div className="container text-center justify-content-center">
          {content}
        </div>
      </div>
    );
  }
}

Plans.propTypes = {
  auth: PropTypes.object.isRequired,
  onClick: PropTypes.func.isRequired
};

const mapStateToProps = state => ({
  auth: state.auth
});

export default connect(mapStateToProps)(Plans);

提前致谢！！

【问题讨论】：

() => this.setState({ selectedplan: "standard" }) 而不是(plan = "standard")，那么它至少会重新渲染。
你需要用状态来管理它。您正在处理局部变量，因此每次单击都不会发生任何事情，这意味着您的组件会重新渲染。所以你需要保持变量的状态，每次点击都做 setState ，这样你就会看到想要的内容
谢谢！我以前有它，即使我点击其他标题，它也呈现标准......也许我会编辑上面的代码块来检查帮助
您的问题解决了吗，还是同样的问题？
还是不行！ ://

标签： javascript reactjs

【解决方案1】：

也许这会为你指明正确的方向。

class Plans extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedplan: ""
    };
  }

  render() {
    let { selectedplan } = this.state,
      content;

    if (selectedplan === "standard") {
      content = <div>Standard</div>;
    } else if (selectedplan === "filled") {
      content = <div>Filled</div>;
    } else if (selectedplan === "premium") {
      content = <div>Premium</div>;
    } else {
      content = (
        <div className="lead text-center">Select an option to view more</div>
      );
    }

    return (
      <div>
        <div className="row">
          <div
            className="col-sm-4 card card-info text-center justify-content-center"
            style={{ margin: "auto" }}
          >
            <h3
              onClick={() => this.setState({ selectedplan: "standard" })}
              name="standard"
            >
              Standard
            </h3>
            <ul>
              <li />
            </ul>
          </div>
          <div
            className="col-sm-4 card text-center justify-content-center"
            style={{ margin: "auto" }}
          >
            <h3
              name="filled"
              onClick={() => this.setState({ selectedplan: "filled" })}
            >
              Feature-Filled
            </h3>
            <ul>
              <li />
            </ul>
          </div>
          <div
            className="col-sm-4 card card-info text-center justify-content-center"
            style={{ margin: "auto" }}
          >
            <h3
              name="premium"
              onClick={() => this.setState({ selectedplan: "premium" })}
            >
              Super Premium
            </h3>
            <ul>
              <li />
            </ul>
          </div>
        </div>
        <hr />
        <div className="container text-center justify-content-center">
          {content}
        </div>
      </div>
    );
  }
}

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<body>
 <div id='root'></div>
</body>

【讨论】：

如果您能突出显示您更改的代码方面会很好
感谢大家和@YakovKiszner，它似乎运行良好。我忘记了解构。
我不明白，你上面的代码应该也可以。