在react中将状态从JSX传递到JSX

Question

所以我不知道如何使用React将我的navBar的状态传递给我的地图。我从导航栏中获取日期，只有当日期匹配时，我才需要在地图中使用它来显示内容。

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、just文件都很陌生。所以在循环的地方，我想获取类似Navbar.state.startDate的东西，这样我就可以将它与我的地图文件中的日期进行比较。

Answer 1

你可以通过道具传递状态。

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

只需在一个组件中创建整个网站，就不需要传递任何东西了。