Question

有没有使用我尚未弄清楚的条件在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);

提前谢谢！

Answer 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>

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

1 个答案: