Javascript 根据映射函数中的条件显示不同的标记或项目 背景：

我有一个react应用程序，用户可以在其中键入一个句子。当用户输入时，应用程序将突出显示红色的“否定”字。这一切都很好。接下来，我想做的是，使用Bootstrap的工具提示和推荐的备选单词，在这些单词上显示工具提示。为了这个问题的简单性，我真正想要的就是“尝试其他东西”这个短语

要显示单词，我只需映射单词列表并将它们显示为标题，如果它们是否定单词列表的一部分，则使用条件将类添加到类名中

问题: 我陷入困境的是如何显示其他项目（不是），例如，当该词是负面列表的一部分时本质上，我的问题是如何使用条件有效地显示不同的项目（

，，等等？

理想情况下，如果满足某些条件，我希望显示具有特定属性的标题，或者如果满足另一个条件，则显示具有其他特定属性的OverlyTrigger

代码：

import React，{Component}来自'React'；
导入“react-loader-spinner/dist/loader/css/react-spinner-loader.css”；
导入“/HomeComponent.css”
从“jquery”导入美元；
const情绪=需要（“情绪”）
持续情绪=新情绪（）；
类HomeComponent扩展组件{
建造师（道具）{
超级（道具）
此.state={
句子：“，
句子列表：[]，
感想：{
分数：0，
否定：[]
}
}
}
异步组件didmount（）{
$（'[data toggle=“tooltip”]'）。tooltip（）；
}
异步组件diddupdate（）{
$（'[data toggle=“tooltip”]'）。tooltip（）；
}
onChange=async（事件）=>{
试一试{
等待这一天({
[event.target.name]：event.target.value，
语句列表：event.target.value.split（“”），
情绪：情绪。分析（事件。目标。价值）
})
}捕获（e）{
log（“OnChange中发生错误”）
}
}
render（）{
返回(
句子的自然语言处理：
用户输入：

删除负片的信息
{
this.state.sentenceList.map（（word）=>(
{word}
))
}
)
}
}
导出默认HomeComponent；

我尝试的是：

---

我尝试添加如下不同的条件：

     <div className={"row"}>
         {
             this.state.sentenceList.map((word) => (
                 {
                     this.state.sentiment.negative.includes(word) &&
                         <h5>{word}</h5>
                 }
                 {
                     this.state.sentiment.negative.includes(word) &&
                     <OverlayTrigger>{word}</OverlayTrigger>
                 }

             ))
         }
     </div>

{
this.state.sentenceList.map（（word）=>(
{
此。状态。情绪。负面。包括（单词）&&
{word}
}
{
此。状态。情绪。负面。包括（单词）&&
{word}
}
))
}

这导致编译>语法错误失败。我尝试了几种不同的写作方法，但结果都很相似

我尝试创建一个新组件，在其中传递{word}和状态中的其他项作为道具，并在那里处理逻辑。我在更新render时遇到了太多的问题，以至于我放弃了并返回到上面的条件

---

任何帮助都将不胜感激！！谢谢

你很接近。这项工作：

<div className={'row'}>
  {this.state.sentenceList.map((word) => (
    <>
      {this.state.sentiment.negative.includes(word) && <h5>{word}</h5>}
      {!this.state.sentiment.negative.includes(word) && <OverlayTrigger>{word}</OverlayTrigger>}
    </>
  ))}
</div>

{this.state.sentenceList.map（（word）=>(
{this.state.touction.negative.includes（word）&&{word}
{！this.state.touction.negative.includes（word）&&{word}
))}

或者更好，三元语法：

<div className={'row'}>
  {this.state.sentenceList.map((word) => this.state.sentiment.negative.includes(word) ? <h5>{word}</h5> : <div>{word}</div>)}
</div>

{this.state.sentenceList.map（（word）=>this.state.emotional.negative.includes（word）？{word}:{word}

“我试图添加不同的条件，就像这样”-这有什么问题？如果两个（或所有）条件都不满足，您希望返回和呈现什么？您的代码尝试出现了什么问题

this.setState

是同步的，不能等待。您的

componentDidMount

和

componentdiddupdate

方法也不需要等待任何东西，因此它们不需要声明为

async

@seesharper IDE不喜欢这种语法，但我无法指出确切的问题。在应用程序中键入任何内容都会崩溃。我在React Docs（）的基础上尝试了几次不同的迭代，但没有成功。@drewerese这个想法是将肯定词和中性词呈现为基本标题，但将鼠标悬停在工具提示上，将用户句子中的否定词呈现为红色。两次代码尝试均失败（请参阅上面的注释）。CDM和CDU曾一度使用JQuery呈现工具提示。对于我的确切问题，它们不是直接需要的，而是需要使用引导程序呈现tooptil，这是下面的步骤。

<div className={'row'}>
  {this.state.sentenceList.map((word) => this.state.sentiment.negative.includes(word) ? <h5>{word}</h5> : <div>{word}</div>)}
</div>