React - 使用 IF 和 Else 重构代码

Question

我正在研究 React，我已经制定了一些渲染 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" />
  </>
);

}

Answer 1

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

Answer 2

我用过react功能组件结构。您不必重复两个 return 语句。只需根据需要调用函数并将视图放入其中。如果您的内容变大并且包含太多条件，您也可以拥有多个功能，只需将它们分开在不同的组件中即可。

Link: https://codesandbox.io/embed/old-haze-t3w1w?fontsize=14&hidenavigation=1&theme=dark

import { useEffect, useState } from "react";
import "./styles.css";

import "./styles.css";

export default function App() {
  const [moduleIndex, setModuleIndex] = useState(null);

  useEffect(() => {
    setModuleIndex(1);
  });
  const _renderHeader = () => {
    return (
      <>
        {moduleIndex ? (
          <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>
        ) : null}
        <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"
        />
      </>
    );
  };

  return <div className="App">{_renderHeader()}</div>;
}

React - 使用 IF 和 Else 重构代码

React - refactoring code with IF and Else

javascript

refactoring

reactjs