在jsx内部循环反应

Searene

我想使用react生成3个span内部div代码，这是我的代码。

export class Test extends React.Component<undefined, undefined> {
  render() {
    const list = ['test1', 'test2', 'test3'];
    const body = (
      list.map(s => {
        <span>s</span>
      })
    )
    return (
      <div>
        {body}
      </div>
    )
  }
}

但是，它没有用。里面没有标签div，为什么？这里有什么问题吗？

Nocebo

使用时，{}您将指示常规的JS语法，而在这种情况下，您将尝试使用JSX语法，因此您应该将其包装起来，()或者在这种隐含的返回值中，可以忽略它。

export class Test extends React.Component<undefined, undefined> {
  render() {
    const list = ['test1', 'test2', 'test3'];
    const body = (
      list.map(s => 
        <span key={s}>s</span>
      )
    )
    return (
      <div>
        {body}
      </div>
    )
  }
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。