React - 使用 IF 和 Else 重构代码
React - refactoring code with IF and Else
我正在研究 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" />
</>
);
}
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"
/>
</>
);
}
我用过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,我已经制定了一些渲染 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" />
</>
);
}
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"
/>
</>
);
}
我用过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>;
}