React地图添加背景色特殊元素

Question

我使用map，但我有一个问题，我试图在map中设置某个元素的背景，在我的情况下，它是"item.title"；我希望我的元素看起来像这样https://ibb.co/ccJzD6g正如你在图片背景颜色"；100%"；这是我在控制台中特别设置的，但事实上如果我设置"；背景：橙色；对于sidebarlist类，则颜色将应用于包括其余元素在内的所有元素，https://ibb.co/ZBTX3hd如果我为titleName类设置背景，它看起来是这样的https://ibb.co/84RKBBw但我希望它看起来像这样https://ibb.co/ccJzD6g我该如何解决这个问题？

课程.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 (
<li key={index} className={less.sidebar_list} onClick={() => {
this.setState({ indexDescription: index })
}}>
<div>
<FontAwesomeIcon className={less.item_icon} icon={item.iconName} />
</div>
<div style={{background: "orange"}} className={less.titleName}>
<p>{item.title}</p>
</div>
<div className={less.titleName}>
<p>{item.titleName}</p>
</div>
</li>
);
});
return (
<>
<div className="abc">
<Navbar color="blue" bg="tomato" centerFlexNavbarContainer="flex"
navbarSearchPage="Search" navbarHomePage="Home" centerHeadlineNavbarColumn="center" />
<div className={less.wrapper}>
<div>
<div className={less.sidebar}>
<div>
<ul>
{listLessons}
</ul>
</div>
</div>
</div>
<div className={less.main_content}>
<div className={less.main_inside_content}>
<div className={less.header}>
<div>
<h2>JavaScript JSON Reference</h2>
</div>
</div>
<div className={less.info}>
<div className={less.description}>
<p>
{
this.props.lesson[this.state.indexDescription]["description"]
}
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</>
);
}
}

Answer 1

第一个问题的答案：分别创建一个具有自己属性的新组件，并将属性映射/传递到该组件。

以下是一个示例：https://codesandbox.io/s/objective-hopper-2st8g?file=/src/Lesson.js