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语句。您可以使用像

这样的三元语句

console.log("Organizations is", organizations);

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

Answer 4

正如已经提到的，toptracks本身是未定义的，在render函数的开头声明它为

const { toptracks } = this.props;

然后您可以在不引用this.props.toptracks

的情况下使用它

其次map函数接受元素和索引的参数，但是你再次将它们声明为toptracks，这会产生别名问题（至少在我的脑海中）并且也只是让人感到困惑......

return toptracks.map((toptracks,k) =>

理想情况下应

return toptracks.map((toptrack,k) => - 然后记得将地图回调中的toptracks更新为toptrack以使其更清晰，哪个是集合，哪个是元素

有关地图功能的更多信息，请参阅https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map。

正如已经指出的，如果toptracks不是一个数组，那么你需要将它变成一个数组或使用.keys，例如，如果它是一个对象。

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

4 个答案: