根据地图函数中的条件显示不同的标签或项目

Question

背景：

我有一个 React 应用程序，用户可以在其中输入一个句子。当用户键入时，应用程序将以红色突出显示“否定”字词。这一切都运作良好。接下来我想做的是使用 Bootstrap 的工具提示和推荐的替代词在这些词上显示工具提示。为了简单起见，我真正想要的只是“试试别的东西？”这句话。

为了显示单词，我简单地映射单词列表并将它们显示为 headers，如果它们是一部分，则有条件将 class 添加到 className否定词列表的。

问题：

我卡住的地方是如何显示其他项目（不是），例如 <OverlayTrigger> 当该词是否定列表的一部分时。 基本上我的问题是如何使用条件有效地显示不同的项目（< h5 >、< OverlayTrigger > 等...）？

理想情况下，我希望在满足某些条件时显示具有特定属性的 header，或者在满足其他条件时显示具有其他特定属性的 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;

我尝试了什么：

我尝试像这样添加不同的条件：

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

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

我尝试创建一个新组件，我将在其中传递 {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>

根据地图函数中的条件显示不同的标签或项目

Displaying different tags or items based on conditionals in a map function

javascript

reactjs

react-bootstrap

背景：

问题：

代码：

我尝试了什么：