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>
    )
  }
}

对于react / 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>
         )
       }
     }

JSX没有返回任何东西

1 个答案: