Question

我有一个反应组件，如：

class List extends Component {
  render() {
    const {infos} = this.props
    var info;
    if(infos.user_info ){
      info = infos.user_info.filter(inf => inf.id).map((inf =>{
        return <div className={"inf"} style={{height:"300px", width:"300px"}} key={inf.id} >
                  <p>{ inf.name }</p>
                  <img src={inf.thumbnail} height="250px" width="250px" />
                </div>

      }))
    }


    return (
      <div> {info} </div>
      )
  }
}

export default List

我在image部分遇到问题。我想用图像显示用户的信息。这里并非所有用户信息都可能包含图像。有些也有空值。

<img src={inf.thumbnail} height="250px" width="250px" />这里我想显示缩略图，如果它可用，我想要显示一些随机图片..

我希望你们明白......我怎么能这样做？

谢谢

Answer 1

您可以使用conditional operator。

inf.thumbnail ?
  <img src={inf.thumbnail} height="250px" width="250px" /> :
  <img src="something-else.png" />

如果inf.thumbnail不是undefined，null，false或''，则只显示缩略图。

如果数据存在则会对组件中的其他内容作出反

1 个答案: