javascript - ReactJs-条件图

我决定显示/隐藏地图取决于按钮。这是我的代码：

let showingMap = true;
const toggleMapVisibility = () => {
    showingMap = !showingMap;
    console.log(showingMap);
};

const DetailModal = (props) => (
  <Button onClick={toggleMapVisibility}>Hide/Show</Button>
              {
              showingMap ?
                  <Segment>
                      <MapObject
                          isMarkerShown
                          lat={props.order.user.userAddressPoint.lat}
                          lng={props.order.user.userAddressPoint.lng}
                          googleMapURL="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places"
                          loadingElement={<div style={{ height: `100%` }} />}
                          containerElement={<div style={{ height: `400px` }} />}
                          mapElement={<div style={{ height: `100%` }} />}
                      />
                  </Segment> :
                  null
            }
}

好了，地图已经正确显示了初始状态。当我单击Button时，但是，它使showingMap变量为false，但无法隐藏地图。我没有任何错误。

有什么建议吗？

最佳答案

您需要更改状态或道具以渲染react组件。
在这里，您可以在局部模态组件中添加本地状态。

class DetailModal extends React.Component {


  state = {
    showingMap: true,
  }

  toggleMapVisibility = () => {
   this.setState((prevState) => (
     {
       showingMap: !prevState.showingMap
     }
   ))
  };

  render() {
    const { showingMap } = this.state;
    const { order } = this.props;
    return (
      <React.Fragment>
        <Button onClick={this.toggleMapVisibility}>Hide/Show</Button>
        {
          showingMap ?
            <Segment>
              <MapObject
                isMarkerShown
                lat={order.user.userAddressPoint.lat}
                lng={order.user.userAddressPoint.lng}
                googleMapURL="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places"
                loadingElement={<div style={{ height: `100%` }} />}
                containerElement={<div style={{ height: `400px` }} />}
                mapElement={<div style={{ height: `100%` }} />}
              />
            </Segment> :
            null
        }
      </React.Fragment>
    )
  }
}

关于javascript - ReactJs-条件图，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/51579573/