用CSS设计React JSX渲染元素的某些部分的样式

Question

我在我的小型react项目中映射了一组数据，以将数据的内容呈现到浏览器中。但我的问题是，我需要对这些渲染内容的某些部分进行样式化，而不是全部。我正在应用的每个CSS属性都适用于所有的P标记。例如，在下面的代码中，样式将适用于Was，适用于生日中的第二项，等等…

下面是我的CSS代码。

import React from "react";
import "./styles.css";
export default function App() {
const data = [
{
details: 'Yesterday was his birthday'
},
{
details: 'Today is my birthday'
},
{
details: 'I cant't remember my birthday date'
}
]
return (
<div className="App">
<h1>I need Help</h1>
<h2>Please How do i style some parts of my rendered details</h2>
{
data.map((detail)=>(
<p>{detail.details}</p>
))
}
</div>
);
}

Answer 1

您可以将highlight道具添加到数组元素中，并用该道具拆分句子。然后，将拆分后的单词放在片段之间自己的span中。

export default function App() {
const data = [
{
details: 'Yesterday was his birthday',
highlight: 'was'
},
{
details: 'Today is my birthday',
highlight: 'birthday'
},
{
details: 'I cant't remember my birthday date',
highlight: 'date'
}
]
return (
<div className="App">
<h1>I need Help</h1>
<h2>Please How do i style some parts of my rendered details</h2>
{data.map((datum) => {
const pieces = datum.details.split(datum.highlight);
return (
<p key={datum.details}>
{pieces[0]}
<span style={{ backgroundColor: "#FF0" }}>{datum.highlight}</span>
{pieces[1]}
</p>
);
})}
</div>
);
}

Answer 2

有很多方法可以解决这个问题。然后@Nick建议的一个是不错的。你也可以看看我的建议。

export default function App() {
const data = [
{
details: 'Yesterday was his birthday',
css: true
},
{
details: 'Today is my birthday',
css: false
},
{
details: 'I cant't remember my birthday date',
css: false
}
]
return (
<div className="App">
<h1>I need Help</h1>
<h2>Please How do i style some parts of my rendered details</h2>
{
data.map((detail)=>(
<p className={detail.css ? 'my-custom-class' : ''}>{detail.details}</p>
))
}
</div>
);
}

使用这种方法，您将不会有<p class="undefined">...</p>