在.map空屏幕内进行条件渲染

时间:2018-07-03 07:57:25

标签: reactjs

我正在尝试使用此功能在内部进行条件渲染:

renderNewBuildingModel = () =>{
if(this.state.newBuildingModel){
  return(

        <Modal isOpen={this.state.newBuildingModel} toggle={this.openNewBuildingModel} className={this.props.className}>
          <ModalHeader toggle={this.openNewBuildingModel}>New Building</ModalHeader>
          <ModalBody>
          <ListGroup>
            {
          this.state.buildings.map((b) => {
            <ListGroupItem>
            <div className="newBuilding">
            <img className="newBuildingImage"src={b.img}/>
    <span className="newBuildingName">{b.name}</span>
            </div>
            <Label className="newBuildingDesc">{b.description}</Label>
            <div>
            {b.wood != undefined ? <Label className="newBuildingDesc">Wood Cost:{b.wood}</Label>: null}
            {b.stone != undefined ? <Label className="newBuildingDesc">Stone Cost:{b.stone}</Label>: null}
            </div>


            </ListGroupItem>

          })
        }
      </ListGroup>
          </ModalBody>
          <ModalFooter>
            <Button color="secondary" onClick={this.openNewBuildingModel}>Cancel</Button>
          </ModalFooter>
        </Modal>

  )
}

}

我只是得到空的模型屏幕,这是在添加b.stone之后发生的! = ...和b.wood!= ...条件行。

enter image description here

编辑:

我通过及时返回并重写代码来解决问题:)

1 个答案:

答案 0 :(得分:1)

我认为您只需删除“ console.log(b)”即可使其正常工作。