javascript - 在 jsx 中循环 react

Question

我想使用 React 在 div 中生成 3 个 span，这是我的代码。

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 里面没有生成标签，为什么？这里有什么问题吗？

Answer 1

当使用 {} 时，您表示的是常规 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>
    )
  }
}