React map如何移除空元素

Question

我有对象，当映射为我呈现空元素时，其中一些对象具有不同的属性https://ibb.co/BGnB0xL如何删除这些空元素？也许你需要使用过滤器或其他什么？

JavaScript_Lessons_Objects.js

import React from "react";
import jsStyle from  "./css/JavasCript_Lesson.module.css";
import {faDotCircle} from "@fortawesome/free-solid-svg-icons/faDotCircle";
const one = "Robby";
function JavaScriptLessonObject() {
return (
[
{
title: [<div><span className={jsStyle.title}>JSON OBJECTS</span></div>],
},
{
titleName: "JS Introduction",
iconName: faDotCircle,
description: [
<span className="yourClass">{one}</span>,
` advanced diverted domestic sex repeated bringing you old.`
],
},
{
titleName: "JS Where To",
iconName: faDotCircle,
description: [
<span className="yourClass">{one}</span>,
` advanced diverted domestic sex repeated bringing you old.1`
],
},
{
title: [<div><span className={jsStyle.title}>JSON OBJECTS</span></div>],
},
{
titleName: "JS Output",
iconName: faDotCircle,
description: [
<span className="yourClass">{one}</span>,
` advanced diverted domestic sex repeated bringing you old.`
],
},
]
);
}
export default JavaScriptLessonObject;

课程.jsx

import React from 'react';
import less from "./css/lesson.module.css";
import "./css/betaLesson.css";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { Navbar } from "../../../Navbar/Navbar";
export class Lessons extends React.Component {
constructor(props) {
super(props);
this.state = {
indexDescription: 0,
}
}
render() {
const listLessons = this.props.lesson.map((item, index) => {
return (
<div key={index}>
<li style={{background: "#ffa50070"}}>
<div>
{item.title ? item.title : <p style={{background: 'indianred'}}>empty elements'</p>}
</div>
</li>

<li onClick={() => { this.setState({ indexDescription: index }) }}>
<div className={less.sidebar_list}>
<div>
<FontAwesomeIcon className={less.item_icon} icon={item.iconName} />
</div>
<div className={less.titleName}>
<div>
<p>{item.titleName}</p>
</div>
</div>
</div>
</li>
</div>
);
});
return (
<>
<div className="abc">
<div className={less.wrapper}>
<div>
<div className={less.sidebar}>
<div>
<ul>
{listLessons}
</ul>
</div>
</div>
</div>
</div>
</div>
</>
);
}
}

我认为问题很明显，当我添加到标题对象[<div> <span className = {jsStyle.title}> JSON OBJECTS </span> </div>]时，我得到了空段落。我特意将颜色设置为橙色，以便于导航，此外，我还在末尾添加了一些代码。请注意这个{ !!item.title && <li>more code here</li>}，这是结果https://ibb.co/JRKY2dx我需要去掉空白段落

Answer 1

如果您只是试图有条件地呈现具有项标题的列表项，则不必使用三进制。

带Logical&amp；操作员

{item.title && (
<li style={{background: "#ffa50070"}}>
<div>
{item.title}
</div>
</li>
)}

并且由于titleName似乎也有条件地呈现列表项

{item.titleName && (
<li onClick={() => { this.setState({ indexDescription: index }) }}>
<div className={less.sidebar_list}>
<div>
<FontAwesomeIcon className={less.item_icon} icon={item.iconName} />
</div>
<div className={less.titleName}>
<div>
<p>{item.titleName}</p>
</div>
</div>
</div>
</li>
)}

为了还去除一点DOM噪声(并且在没有呈现列表项的情况下不注入空div(，我还建议在ReactFragment中返回列表项(li(。

const listLessons = this.props.lesson.map((item, index) => {
return (
<Fragment key={index}>
...
</Fragment>
);
};