如何在render函数中使用if语句？

Question

下面是我的渲染方法。我只想在toptracks不是null的情况下遍历它。但是我不能让它工作。

render() {
   console.log('galler props',this.props);

    const { toptracks } = this.props;
    return (
       <div>
        if(this.props.toptracks !== null){

        {toptracks.map((toptracks,k) => {
          const trackImg =toptracks.track[0].image[0]['#text'];
          return (
              <div
                  key = {k}
                  className ="track"
                  >
                  <img
                     src={trackImg}
                     className="trackImg"
                     alt="track"
                     />
                     <p className="tracl-text">
                               {track.name}
                         </p>
                         </div>      

                             )
                         }
                       ) 
                     }
         }

         </div>
    ) 
}

Answer 1

在render-return语句中不能有if语句。您可以使用像这样的三元语句

render() {
        const { toptracks } = this.props;
        return (
           <div>

            {this.props.toptracks ? toptracks.map((toptracks,k) => {
              const trackImg =toptracks.track[0].image[0]['#text'];
              return (
                  <div key = {k} className ="track">
                      <img
                         src={trackImg}
                         className="trackImg"
                         alt="track"
                      />
                       <p className="tracl-text">
                           {track.name}
                       </p>
                   </div>      
                )
              }) : null}
             </div>
        ) 
    }

Answer 2

如果你决定提前退货，使用if是相当简单的：

render() {
   const { toptracks } = this.props;

   if (!toptracks) { // this will handle both null and undefined
      return <div/>;
   }

   return (
      ...
   );
}

然而，有更简单的方法可以做到这一点。请注意，在您的示例中，没有值与具有空值是相同的。那么为什么不默认为空值呢？

render() {
   const toptracks = this.props.toptracks || [];

   // no change needed here
}

可以通过为组件定义defaultProps来完成相同的操作。

static defaultProps = {
   toptracks: []
};

Answer 3

如果您将其作为功能组件，则可以添加if，并在其中添加if语句。

ShowTopTracks = () =>{
    if(this.props.toptracks){
        return toptracks.map((toptracks,k) => {
            const trackImg =toptracks.track[0].image[0]['#text'];
            return (
              <div
                  key = {k}
                  className ="track"
                  >
                  <img
                     src={trackImg}
                     className="trackImg"
                     alt="track"
                     />
                  <p className="tracl-text">
                     {track.name}
                  </p>
              </div>      
            )
        }) 
    }
    else return null;
}


render() {
   console.log('galler props',this.props);

    const { toptracks } = this.props;
    return (
       <div>
       {this.ShowTopTracks()}
       </div>
    ) 
}