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

使用React.Fragment：

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

或

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

请参见Fragments

Answer 2

当然可以，请按照以下步骤操作：

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

return(
       {caret}
       {submenuHtml}
    ); 
}

这应该可行。

Concat 2 JSX元素

2 个答案: