Блог

Главная - Вопросы по программированию - Использование контекста с React для передачи значений между компонентами

Использование контекста с React для передачи значений между компонентами

#javascript #reactjs #react-props #react-context

Вопрос:

Попытка использовать контекст для передачи значений между компонентами:

Создал файл для обработки контекста: единственная проблема, с которой я сейчас сталкиваюсь, заключается в том, что:

«Невозможно вызвать createContext с привязанным литералом объекта defaultValue , поскольку номер [1] несовместим с Number [2] в свойстве index «.

 // @flow
import React, { createContext, useContext } from "react";

export type CountryIndexProviderType = {
  index: Number,
};

const CountryContext = createContext<CountryIndexProviderType>({
  index: 0,
});

type CountryContextProviderProps = {
  index: Number,
};

const CountryContextProvider = ({ index }: CountryContextProviderProps) => {
  return <CountryContext.Provider value={{ index }}></CountryContext.Provider>;
};

const useCountryIndexContext = () => useContext(CountryContext);

export { CountryContext, CountryContextProvider, useCountryIndexContext };

Первый компонент, в котором задается значение индекса:

 import { CountryContextProvider } from "/EnteredCountriesContext";

return (
  <StyledWrappingContainer>
    <StyledProgress>{index   2}</StyledProgress>
    <CountryContextProvider index={index}></CountryContextProvider>
  </StyledWrappingContainer>
);

Второй компонент пытается использовать контекст:

 import { useCountryIndexContext } from "/EnteredCountriesContext";
const { index } = useCountryIndexContext();

<StyledWrappingContainer>
   <StyledProgress>
      <StyledProgress>{index   2}</StyledProgress>
   </StyledProgress>
</StyledWrappingContainer>

Только что включил JSX, единственный другой код, который у меня есть, относящийся к моим новым изменениям в контексте, — это импорт React в первом компоненте.

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

1. Попробуйте kentcdodds.com/blog/how-to-use-react-context-effectively

2. Если речь идет не о том, чтобы отскакивать назад и вперед от одной переменной, а о том, чтобы разделить какое-то сложное состояние между несколькими разбросанными компонентами, я бы предложил выбрать какой-нибудь подходящий инструмент, например Redux.

3. Если ваш интерес скорее познавательный, вы можете ознакомиться с кучей кодов, которые я придумал, чтобы объяснить API контекста React: codepen.io/collection/XRMdwg

4. Спасибо! думаю, что теперь я намного ближе к решению, обновил свой код, чтобы отразить последнюю версию. возможно, проблема с типом моего контекстного файла?

Метки: