Javascript 如何根据句子索引突出显示句子？

我有一个文本编辑器，用户在其中输入一些文本/段落，并在我单击submit时调用API。后端将整个段落拆分为句子，并在响应中以数组形式发送它们。现在我将句子数组存储到一个状态中，然后使用map（）函数显示它，我还将'hard'对象存储到一个hardIndex状态中。我必须突出显示索引处于硬索引状态的句子，在我的示例响应中，“0”和“2”句子需要突出显示，这是我无法做到的。有人能告诉我如何突出那些索引处于“硬索引”状态的句子吗

api发送的响应如下所示：

{
  "sentences": [
    "The computer runs on a three-step cycle namely input, process, and output.",
    "Also, the computer follows this cycle in every process it was asked to do. ",
    "In simple words, the process can be explained in this way. ",
  ],
  "hard": [
    0,
    2
  ] //index of sentences which needs to be highlighted

到目前为止，我已经写了他的信

states={
hard:[],
sentencesHard: []
}


  performSentenceAnalysis = async () => {
    const { enteredText } = this.state;

    const body = { snippetdesc: enteredText };
    const stringifiedBody = JSON.stringify(body);
    const options = {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        Accept: "application/json"
      },
      body: stringifiedBody
    };
    const url = "http://localhost:8000/api/readability";
    try {
      const response = await fetch(url, options);  
      const result = await response.json();

      this.setState(prevState => ({
        sentencesHard: result.sentences,
        hardIndex: result.hard,
      }));
    } catch (error) {
      console.error(error);
    }
  };


//the sentences array is displayed here and I need to highlight those sentences whose indexes are in the hard array

<div className="lastBox">
          { this.state.sentencesHard.map(sentence =>{
            return(
               <div>
                 {sentence}
               </div>
               )
           }
</div>

状态={
硬：[]，
句子碎片：[]
}
PerformContenceAnalysis=async（）=>{
const{enteredText}=this.state；
const body={snippetdesc:enteredText}；
const stringifiedBody=JSON.stringify（body）；
常量选项={
方法：“张贴”，
标题：{
“内容类型”：“应用程序/json”，
接受：“应用程序/json”
},
主体：stringifiedBody
};
常量url=”http://localhost:8000/api/readability";
试一试{
const response=等待获取（url、选项）；
const result=wait response.json（）；
this.setState（prevState=>({
结果，句子，
hardIndex:result.hard，
}));
}捕获（错误）{
控制台错误（error）；
}
};
//这里显示的是句子数组，我需要突出显示那些索引在硬数组中的句子
{this.state.sentencesHard.map（句子=>{
返回(
{句子}
)
}

您可以使用条件运算符，查看正在迭代的字符串的索引是否包含在

硬数组中：

<div className="lastBox"> {
  this.state.sentencesHard.map((sentence, i) => (
   <div style={{ backgroundColor: this.state.hardIndex.includes(i) ? 'yellow' : 'initial' }}>
     {sentence}
   </div>
  ))
} </div>

然后参考
语句
和
硬
属性（或者可以将
硬
属性重命名为
硬标记
，以更清楚地说明它实际上是什么）
您可以使用条件运算符，查看正在迭代的字符串的索引是否包含在
硬
数组中：

<div className="lastBox"> {
  this.state.sentencesHard.map((sentence, i) => (
   <div style={{ backgroundColor: this.state.hardIndex.includes(i) ? 'yellow' : 'initial' }}>
     {sentence}
   </div>
  ))
} </div>

然后参考
语句
和
硬
属性（或者可以将
硬
属性重命名为
硬标识
，以使其更清楚实际是什么）
谢谢你的解决方案，它成功了。我也会记住设置状态部分。但是，我想知道我是否可以将
句子数组中的所有句子连接起来，使它看起来像一个段落，就像现在一样，它分别显示每个句子，背景颜色到处都是，看起来很难看。我我希望句子数组实际上可以像用户最初键入的段落一样显示，或者更接近段落，而不是单独显示每一行。您当前正在映射到一个
s数组，这些数组之间有换行符。如果您不想换行符，可以使用
span
s代替。好的，开始吧不是吗。但是没有办法知道段落的间隔？或者我可以让机器学习的人做点什么，让段落间隔和用户输入的原始文本一样。如果api发送的响应是：…，看起来api目前并没有区分段落。我肯定有办法做到这一点t、 但是你必须改变后端逻辑感谢这个解决方案，它起了作用。我也会记住设置状态部分。但是，我想知道我是否可以将
句子
数组中的所有句子连接起来，并使它看起来像一个段落，就像现在一样，它分别显示每个句子和背景颜色它到处都是，看起来有点难看。我希望句子数组实际上能像用户最初键入的段落一样显示，或者更接近段落，而不是单独显示每一行。你当前映射到一个
数组，它们之间有换行符。如果你不想换行符，y你可以用
span
s来代替它好的，明白了。但是没有办法知道段落分隔符？或者我可以让机器学习人员做点什么，让段落分隔符和用户键入的原始文本一样。如果api发送的响应像这样：…，那么api目前看起来与我们之间没有区别我肯定有办法做到这一点，但你必须改变后端逻辑