Javascript 使用CSS设置React JSX呈现元素的某些部分的样式

我在我的小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>
  );
}

从“React”导入React；
导入“/styles.css”；
导出默认函数App（）{
常数数据=[
{
细节：“昨天是他的生日”
},
{
细节：“今天是我的生日”
},
{
细节：“我不记得我的生日了”
}
]
返回(
我需要帮助
请说明如何设置渲染细节的某些部分的样式
{
data.map（（细节）=>(
{detail.details}

))
}
);
}

您可以在数组元素中添加一个突出显示的

道具，并按该道具拆分句子。然后，将拆分的单词放在片段之间自己的
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>
  );
}

导出默认函数App（）{
常数数据=[
{
细节：“昨天是他的生日”，
亮点：“是”
},
{
详情：“今天是我的生日”，
推荐理由：“生日”
},
{
细节：“我不记得我的生日了”，
亮点：“日期”
}
]
返回(
我需要帮助
请说明如何设置渲染细节的某些部分的样式
{data.map（（基准）=>{
常数件=基准.细节.分割（基准.突出显示）；
返回(

{件[0]}
{datum.highlight}
{件[1]}

);
})}
);
}
解决这个问题的方法有很多。那么@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>
  );
}

导出默认函数App（）{
常数数据=[
{
细节：“昨天是他的生日”，
css：对
},
{
详情：“今天是我的生日”，
css:false
},
{
细节：“我不记得我的生日了”，
css:false
}
]
返回(
我需要帮助
请说明如何设置渲染细节的某些部分的样式
{
data.map（（细节）=>(
{detail.details}
))
}
);
}

使用这种方法，您将不会有
…
这不是
undefined
在React中的工作方式
className={undefined}
实际上会导致DOM元素根本没有所需的
class
属性。我绝对不建议将其设置为空字符串，否则在呈现的HTML中会出现
class=”“
。这两种解决方案都不错，但我真的希望是这样。我喜欢足球，因为在第一阶段，造型将仅适用于足球。请将您的解决方案应用于所有元素。我想要的只是p标签的一部分，而不是p标签上的所有单词。@OluwafemiAkinyemi我更新了我的答案，这应该可以满足你的需要！