我正在尝试将常量与一组其他 HTML 组合在一起，但出现错误

Question

我有一个常量

，如下所示：

 const subMenu = this.props.content.Children.map(item => (
      <li
        className="mobile-menu-overlay__submenu-items text-capitalize"
        key={item.Title}
      >
        <a href={item.Url}>
          <strong>{ item.Title }</strong>
        </a>
      </li>
    ));

并希望在完成循环后将其与以下 HTML 组合：

' <li className="mobile-menu-overlay__submenu-items text-capitalize feature-link">
        <strong><a href={this.props.content.Link.Src}>{this.props.content.Link.Title}</a></strong>
    </li>'

我希望结果如下，但我不断收到错误：

 const subMenu = this.props.content.Children.map(item => (
      <li
        className="mobile-menu-overlay__submenu-items text-capitalize"
        key={item.Title}
      >
        <a href={item.Url}>
          <strong>{ item.Title }</strong>
        </a>
      </li>
    )) + ' <li className="mobile-menu-overlay__submenu-items text-capitalize feature-link">
        <strong><a href={this.props.content.Link.Src}>{this.props.content.Link.Title}</a></strong>
    </li>';

Answer 1

你的 map(( 调用返回一个 JSX 数组，但你试图用一个字符串连接。

尝试使用数组 concat(( 方法来添加其他元素。

像这样：

const subMenu = this.props.content.Children
  .map(item => (
    <li
      className="mobile-menu-overlay__submenu-items text-capitalize"
      key={item.Title}
    >
      <a href={item.Url}>
        <strong>{ item.Title }</strong>
      </a>
    </li>
  ))
  .concat([
    <li
      className="mobile-menu-overlay__submenu-items text-capitalize feature-link"
      key={this.props.content.Link.Title}
    >
      <a href={this.props.content.Link.Src}>
        <strong>{this.props.content.Link.Title}</strong>
      </a>
    </li>
  ])