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

Question

背景：

我有一个react应用程序，用户可以在其中键入一个句子。当用户键入时，应用程序将突出显示"；否定的"；红色单词。这一切都很好。接下来我想做的是，使用Bootstrap的工具提示和推荐的替代单词来显示这些单词的工具提示。为了简化这个问题，我真正想要的只是短语"；试试别的吗&"；。

为了显示单词，我只需映射单词列表，并将它们显示为带有条件的标题，如果它们是否定单词列表的一部分，则向className添加一个类。

问题：

我陷入困境的地方是如何显示其他项目(不是(，例如<OverlayTrigger>当这个词是否定列表的一部分时本质上，我的问题是如何使用条件词有效地显示不同的项目(<h5>、<OverlayTrigger>等(

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

代码：

import React, {Component} from 'react';
import "react-loader-spinner/dist/loader/css/react-spinner-loader.css";
import "./HomeComponent.css"
import $ from 'jquery';
const Sentiment = require('sentiment')
const sentiment = new Sentiment();
class HomeComponent extends Component {
constructor(props) {
super(props)
this.state = {
sentence: "",
sentenceList: [],
sentiment: {
score: 0,
negative: []
}
}
}
async componentDidMount() {
$('[data-toggle="tooltip"]').tooltip();
}
async componentDidUpdate() {
$('[data-toggle="tooltip"]').tooltip();
}
onChange = async (event) => {
try {
await this.setState({
[event.target.name]: event.target.value,
sentenceList: event.target.value.split(" "),
sentiment: sentiment.analyze(event.target.value)
})
} catch (e) {
console.log("Error occurred in OnChange")
}
}
render() {
return (
<div className={"container"}>
<h1>Natural Language Processing of a Sentence:</h1>
<h5> User Input:</h5>
<div className={"row"}>
<input
value={this.state.sentence}
type={"text"}
id={"sentence"}
name={"sentence"}
size={"125"}
onChange={this.onChange}
/>
</div>
<hr className="rounded"/>
<h5> Message to Remove Negatives</h5>
<div className={"row"}>
{
this.state.sentenceList.map((word) => (
<h5 className={this.state.sentiment.negative.includes(word) ? "mr-1 negativeWord rounded" : "mr-1"}>
{word}
</h5>
))
}
</div>
</div>
)
}
}
export default HomeComponent;

我尝试过的：

1. 我试着添加不同的条件，比如：

   <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>
   

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

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

如有任何帮助，我们将不胜感激！！谢谢

Answer 1

你很接近。这项工作：

<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>

或者更好的是，三元语法：

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