ReactJs-条件映射

您需要更改状态或道具以重新提交react组件。

在这里,您可以在DetailModal组件中添加本地状态。

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

将showingMap置于state和toggleMapVisibility调用中

this.setState({ showingMap: !this.state.showingMap)};