在反應中將狀態從 JSX NavBar 傳遞到 JSX Map

Question

所以我不知道如何使用 React 將我的導航欄的狀態傳遞給我的地圖。 我從我的導航欄中獲取日期，我需要在我的地圖中使用它來顯示日期匹配的內容。

class NavSearchBar extends Component {

    constructor(){
        super();
        this.state = {
            startDate: moment().startOf('month'),
            endDate: moment().startOf('month'), 
    }//these get updated somewhere else in the code
    ...

和

class MyMap extends Component {
   OnEachCountry = (country, layer) => { // loops thru every country
        const country_name = country.properties.NAME; // name of country
        country.properties.reported_incidents = 0; // reported incidents
        for(var tweet2 = 0; tweet2<tweet_loc.length;tweet2++){ // loops thru tweet list
            var Location_Name = JSON.stringify(tweet_loc[tweet2].user.location);
            if(Location_Name.includes(country.properties.NAME) || 
               Location_Name.includes(country.properties.ADM0_A3)){ 
                country.properties.reported_incidents++;
              // in this for loop I want to check if its between the dates too so like 
              //nav.state.startDate
            }
        }
}

所以我對 React、Javascript、css、jsonfiles 還很陌生，剛從這個項目開始。 所以循環在哪里我想獲取類似 Navbar.state.startDate 的東西，這樣我就可以將它與我的地圖文件中的日期進行比較。

Answer 1

你可以通過 props 傳遞狀態

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

function App() {
  return (
    <div>
      <Welcome name="Sara" />
      <Welcome name="Cahal" />
      <Welcome name="Edite" />
    </div>
  );
}

有官方文檔。 https://reactjs.org/docs/components-and-props.html#gatsby-focus-wrapper

Answer 2

只需將您的整個網站放在一個組件中，然后您就不需要傳遞任何內容。