Передача состояния из панели навигации JSX в карту JSX в react

#javascript #node.js #reactjs #jsx #react-leaflet

#javascript #node.js #reactjs #jsx #react-листовка

Вопрос:

Поэтому я не могу понять, как использовать 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, чтобы я мог сравнить его с датами в моем файле карты.

Ответ №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

1. Это помогает мне редактировать компоненты позже, но не отправляет дату из одного компонента для использования в другом в режиме реального времени или даже в статическом времени. Например, я могу передать весь компонент и изменить что-то в состоянии перед его отображением, но я не могу взять что-то из формы и использовать это в другом компоненте для его отображения. Я хочу получить дату от пользователя, а затем на основе этой даты отобразить элемент.

2. Подождите, я просто заставлю его отображать из моего onSubmit, чтобы создать следующий компонент, о, боже, спасибо тебе

3. Точно, просто используйте реквизиты для всех коммуникаций между компонентами, без проблем, в этом смысл stackoverflow

Ответ №2:

Просто создайте весь свой веб-сайт в одном компоненте, тогда вам не нужно ничего передавать.