我想把一个组件分成两个组件React JS

Question

我遇到了一个问题，因为我会将一个组件拆分为两个组件。我用一个带有自动完成功能的搜索栏和一个用搜索栏选择的pin构建我的组件。而我，我会把一个组件与searcbar联系起来，另一个组件则与地图联系起来，他们之间会交流日期。

但我不知道怎么做。。有人能帮我吗？对不起我的英语，我是法国

这是我的组件的代码：

import React, { useState, createContext } from 'react';
import {Map, Marker, GoogleApiWrapper} from 'google-maps-react';
import PlacesAutocomplete, {
geocodeByAddress,
getLatLng,
} from 'react-places-autocomplete';
import Child2 from '../Child2';

const Location = createContext();

function Searchbar() {

const [address, setAdress] = useState("")
const [coordinates, setCoordinates] = useState({
lat: null,
lng: null
})

const handleSelect = (value, props) => {
const results = await geocodeByAddress(value);
const ll = await getLatLng(results[0])
console.log(ll)
setAdress(value)
setCoordinates(ll)
props.OnSelectPlace(ll)
}

return (
<div className="Searchbar">

<p>{coordinates.lat}</p>
<p>{coordinates.lng}</p>
<p>{address}</p>

<PlacesAutocomplete
value={address}
onChange={setAdress}
onSelect={handleSelect}
>
{({ getInputProps, suggestions, getSuggestionItemProps, loading }) => (
<div>
<input
{...getInputProps({
placeholder: 'Search Places ...',
className: 'location-search-input',
})}
/>
<div className="autocomplete-dropdown-container">
{loading && <div>Loading...</div>}
{suggestions.map(suggestion => {
const className = suggestion.active
? 'suggestion-item--active'
: 'suggestion-item';
// inline style for demonstration purpose
const style = suggestion.active
? { backgroundColor: '#E4E4E4', cursor: 'pointer' }
: { backgroundColor: '#F8F8F8', cursor: 'pointer' };
return (
<div
{...getSuggestionItemProps(suggestion, {
className,
style,
})}
>
<span>{suggestion.description}</span>
</div>
);
})}
</div>
</div>
)}
</PlacesAutocomplete>

</div>
);
}

export {Location};
export default GoogleApiWrapper({
apiKey: ("secret_code_api_google_map")
})(Searchbar)

Answer 1

构建两个独立的组件，一个用于映射，另一个用于搜索栏。然后将日期作为道具传递给第二个组件。