javascript - 如何在Reactjs的 map 中使用JS包含和替换？

我需要检查字符串数组中的字符串，看看它是否包含单词“ Heading”。如果是这样，我想以不同的方式设置元素的格式并从元素中删除单词标题。

这就是我在ASP.net Core中的C＃中执行的操作。它是根据我想在反应中使用的相同数据绘制的。

 @foreach (var item in (IEnumerable)ViewData["Conditions"])
    {
        if (item.ToString().Contains("Heading"))
        {
            <div id="team" class="form-group col-xs-12 col-md-12">
                <h3> @item.ToString().Replace("Heading", "")</h3>
            </div>
        }
        else
        {
            <div class="form-group col-md-3 text-left">@item.ToString()</div>
        }
    }

在ReactJS中，我从以下内容开始。只要我不使用If语句，它就起作用。那么，如何在地图中使用JS包含和替换？

const ConditionsList = props => {
return (
<div class="row">
  {props.conditions.map((item, index) => {
    if ({ item.includes("heading") }) {
        return (
          <div class="col col-md-12">{item}</div>
        );
      }
      else
      {
        return (
          <div class="col col-md-3">
            <Card className="cardBody">
              <CardText className="conditions " Key={index}>
                {item}
              </CardText>
            </Card>
          </div>
        );
    };
        })}
</div>
);
};

它不喜欢{item.includes（“ heading”）}，我怀疑它也不喜欢我尝试替换。

最佳答案

您不能在JSX中使用if else，可以使用三元

const ConditionsList = props => {
return (
<div class="row">
  {props.conditions.map((item, index) => {
    return  item.includes("heading") ?  <div class="col col-md-12">{item}</div>
                                     : <div class="col col-md-3">
            <Card className="cardBody">
              <CardText className="conditions " Key={index}>
                {item}
              </CardText>
            </Card>
          </div>
     };
  </div>
 );
};

If else in JSX

关于javascript - 如何在Reactjs的 map 中使用JS包含和替换？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/58333288/