Concat 2 JSX-элемента

Question

У меня есть это в render().

render() {
    let caret = <span className="caret"></span>;
    let submenuHtml = this.props.submenu.map((menuItem, index)=> <span>{menuItem.name}</span>);

    return(submenuHtml);
  }

Мне нужно вернуть caret + submenuHtml без каких-либо переносов div или span, чтобы возвращаемый HTML выглядел следующим образом:

<span className="caret"></span>
<span>Menu1</span>
<span>Mennu2</span>

Возможно ли это?

Answer 1

Да, конечно, вы можете сделать это следующим образом:

render() { 
    let caret = <span className="caret"></span>
    let submenuHtml = this.props.submenu.map((menuItem, index)=> {
    return <span>{menuItem.name}</span>
    });

return(
       {caret}
       {submenuHtml}
    ); 
}

Это должно работать.

Answer 2

Использование React.Fragment:

return (
  <React.Fragment> 
    {caret}
    {submenutHtml}
  </React.Fragment>
);

или

return (
  <> 
    {caret}
    {submenutHtml}
  </>
);

См. Фрагменты