如何在React中使用不带映射的MapboxGeocoder

npm install react-map-gl mapbox-gl mapbox-gl-geocoder

import ReactMapGL, { GeolocateControl } from 'react-map-gl';
import MapboxGeocoder from 'mapbox-gl-geocoder';

const MAPBOX_TOKEN = 'YOUR_MAPBOX_TOKEN';

constructor(props) {
  super(props);
  this.state = {
    viewport: {
      width: 400,
      height: 400,
      latitude: 37.7577,
      longitude: -122.4376,
      zoom: 8
    }
  };
}

render() {
  return (
    <div>
      <ReactMapGL
        {...this.state.viewport}
        onViewportChange={(viewport) => this.setState({viewport})}
        mapboxApiAccessToken={MAPBOX_TOKEN}
      >
        <div style={{position: 'absolute', top: 10, left: 10}}>
          <MapboxGeocoder
            mapboxApiAccessToken={MAPBOX_TOKEN}
            onSelected={this.handleGeocoderResult}
            viewport={this.state.viewport}
            hideOnSelect={true}
          />
        </div>
      </ReactMapGL>
    </div>
  );
}

handleGeocoderResult = (result) => {
  console.log(result);
  // 处理地理编码器结果的逻辑
}