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

你的 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>
  ])

我试图将常量与一组其他HTML组合，但我收到一个错误

1 个答案: