React JS: Как передать переменную из одного файла в другой файл, который не является родительским или дочерним для одного и того же файла?

#javascript #reactjs

Вопрос:

 import moment from "moment";
import TrackerByDate from "./traker_by_date/tabs";

export default function Calender() {
  const [value] = useState(new Date());
  const [show, setTracker] = useState(false);

  const [dateState, setDateState] = useState(new Date());
  const changeDate = (e) => {
    setDateState(e);
  };
  var pikerdate = moment(dateState).format("YYYY-MM-DD");
  function clickTracker(e) {
    setTracker(!show);
  }

  return (
    <>
      {show ? <TrackerByDate dataFromParent={pikerdate} /> : null}
      <div style={{ width: "260px" }} className="res-calendar">
        <Calendar
          className={["c1", "c2"]}
          onChange={changeDate}
          onClickDay={clickTracker}
          value={dateState}
        />
      </div>
    </>
  );
 

Я пытаюсь передать «pikerdate» в файл js под названием diet .
callander.js и diet.js не являются родителем или ребенком

Я хочу получить дату, diet.js когда дата будет нажата callender.js

Комментарии:

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

2. Именно здесь на первый план выходит управление состоянием на уровне приложения, чтобы несколько несвязанных компонентов могли иметь доступ к одним и тем же данным. Подумайте о том, чтобы пройти через «Контекстный API». reactjs.org/docs/context.html или «React-Redux» react-redux.js.org

Ответ №1:

вы можете сделать это, взяв «pikerdate» в родительском компоненте, где два компонента(называемый и diiet) являются дочерними, как в App.js или какой-либо другой компонент и передайте «pikerdate» обоим компонентам.