时间戳

首页 > 解决方案 > React - 使用 IF 和 Else 重构代码

javascript - React - 使用 IF 和 Else 重构代码

问题描述

我正在研究反应，我已经制定了一些渲染 DIV 的逻辑，但我知道它是多余的，我不知道如何重构它。这是代码：

renderHeader() {
const {
  course_module_index
} = this.state;
if(course_module_index === 0)
return (
  <>
    <h4 className="col-3 md-col-8 sm-col-4 color__primary1 bold">Conversation</h4>
    <p className="col-8 offset-3 md-col-8 sm-col-4 body2 back__type">
      Practice your English in the conversation classes available in the schedule below. you can enter a
      class up to 10 min. after your start time, but we recommend that you book a time as
      class size is limited.
    </p>
    <div className="header__opening-class">
      <h6> Opening Classes Available!</h6>
      <p> Mon/Wed/Fri from 9:00h to 9:30h | Tues/Thurs from 7:00 pm to 7:30 pm </p>
    </div>
    <hr ref={this.conversationBlockRef} className="margin-zero col-12 md-col-8 sm-col-4" />
  </>
);
return (
  <>
    <h4 className="col-3 md-col-8 sm-col-4 color__primary1 bold">Conversation</h4>
    <p className="col-8 offset-3 md-col-8 sm-col-4 body2 back__type">
      Practice your English in the conversation classes available in the schedule below. you can enter a
      class up to 10 min. after your start time, but we recommend that you book a time as
      class size is limited.
    </p>
    <hr ref={this.conversationBlockRef} className="margin-zero col-12 md-col-8 sm-col-4" />
  </>
);

}

标签： javascriptreactjsrefactoring

解决方案

React 元素可以存储在变量中，以便以后使用，您可以使用条件来决定是否渲染元素

  renderHeader() {
    const { course_module_index } = this.state;

    // use a condition to conditionally render this element
    const schedule = course_module_index === 0 && (
      <div className="header__opening-class">
        <h6>Opening Classes Available!</h6>
        <p>
          Mon/Wed/Fri from 9:00h to 9:30h | Tues/Thurs from 7:00 pm to 7:30 pm
        </p>
      </div>
    );

    // Use the schedule variable within the following expression.
    // If `schedule` is false, then React will render nothing in its place
    return (
      <>
        <h4 className="col-3 md-col-8 sm-col-4 color__primary1 bold">
          Conversation
        </h4>
        <p className="col-8 offset-3 md-col-8 sm-col-4 body2 back__type">
          Practice your English in the conversation classes available in the
          schedule below. you can enter a class up to 10 min. after your start
          time, but we recommend that you book a time as class size is limited.
        </p>
        {schedule}
        <hr
          ref={this.conversationBlockRef}
          className="margin-zero col-12 md-col-8 sm-col-4"
        />
      </>
    );
  }

如果你觉得它更容易阅读，你可以直接在 JSX 中使用条件：

  renderHeader() {
    const { course_module_index } = this.state;

    return (
      <>
        <h4 className="col-3 md-col-8 sm-col-4 color__primary1 bold">
          Conversation
        </h4>
        <p className="col-8 offset-3 md-col-8 sm-col-4 body2 back__type">
          Practice your English in the conversation classes available in the
          schedule below. you can enter a class up to 10 min. after your start
          time, but we recommend that you book a time as class size is limited.
        </p>
        {course_module_index === 0 && (
          /* This won't render if the condition was false */
          <div className="header__opening-class">
            <h6>Opening Classes Available!</h6>
            <p>
              Mon/Wed/Fri from 9:00h to 9:30h | Tues/Thurs from 7:00 pm to 7:30
              pm
            </p>
          </div>
        )}
        <hr
          ref={this.conversationBlockRef}
          className="margin-zero col-12 md-col-8 sm-col-4"
        />
      </>
    );
  }

推荐阅读