JSX没有返回任何东西

Question

我在我的组件中有这个代码，我可以看到在调试时有值评估，但是当代码完成执行时，我没有在结果中看到任何内容，我的JSX有什么问题吗？

export default class TilesComponent extends React.Component<ITilesComponentProps, {}> {
  public render(): React.ReactElement<ITilesComponentProps> {
    return (
      <div className={styles.tiles}>
        {this.props.structure.tiles != null &&

          this.props.structure.tiles.map((tile) => {
                {(
                <div className="tile">
                  <h1>{tile.tileName}</h1>
                  <h2>wassup</h2>
                </div>
                ) 
            }
        })}
    </div>
    )
  }
}

我仍然是新的反应/ jsx，所以我可能写错了。

谢谢。

Answer 1

在地图内部需要更正

错了一个：

   this.props.structure.tiles.map((tile) => {
            {(
            <div className="tile">
              <h1>{tile.tileName}</h1>
              <h2>wassup</h2>
            </div>
            ) 
        }
    })}

正确对象，真爱：

 this.props.structure.tiles.map((tile) => {
            return (
            <div className="tile">
              <h1>{tile.tileName}</h1>
              <h2>wassup</h2>
            </div>
            ) 
    })

完整片段：

      export default class TilesComponent extends    React.Component<ITilesComponentProps, {}> {
      public render():    React.ReactElement<ITilesComponentProps> {
     return (
        <div className={styles.tiles}>
            {this.props.structure.tiles != null &&

             this.props.structure.tiles.map((tile) => {
                  return(
                   <div className="tile">
                      <h1>{tile.tileName}</h1>
                     <h2>wassup</h2>
                  </div>
                )
            })}
         </div>
         )
       }
     }