React map如何删除空元素？答案

【问题标题】：React map how to remove empty elements?React map如何删除空元素？
【发布时间】：2021-03-13 02:19:02
【问题描述】：

我有对象，当地图为我呈现空元素时，其中一些对象具有不同的属性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;

Lesson.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 我需要去掉空白段落

【问题讨论】：

如何将lessons 传递给Lessons 组件？从哪里以及如何？

标签： javascript arrays reactjs filter react-redux

【解决方案1】：

如果您只是尝试使用项目标题有条件地呈现列表项，则不必使用三元组。

Inline If with Logical && Operator

{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），我还建议在 React Fragment 中返回列表项 (li)。

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

【讨论】：