我正在嘗試將常量與一組其他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>
  ])