javascript - 我试图将一个常量与一组其他 HTML 结合起来，但出现错误

Question

我有一个 const 如下:

 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

您的 ma​​p() 调用返回一个 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>
  ])