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

Question

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

这就是我在 ASP.net Core 中使用 C# 执行此操作的方式。它来 self 想在 React 中使用的相同数据。

 @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 语句，它就可以工作。那么如何在 map 中使用 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") } 而且我怀疑它也不喜欢我对 Replace 的尝试。

Answer 1

你不能在 JSX 中使用 if else，你可以使用 ternary

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