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功能组件结构。您不应该重复两个返回语句。只需根据需要调用函数并将视图放在其中即可。如果内容变大并且包含太多条件，则也可以有多个函数，只需将它们分离到不同的组件中即可。

链接：https://codesandbox.io/embed/old-haze-t3w1w?fontsize=14&隐藏导航=1&主题=深色

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>;
}