Блог

в react native у меня есть следующие файлы:

App.js

 import { StyleSheet, Text, View } from 'react-native';
import Children from './Child';
import { MyProvider } from './context/Context';
import React from 'react';

const App = () => {
  return (
    <MyProvider>
      <View style={styles.container}>
        <Children />
        <StatusBar style="auto" />
      </View>
    </MyProvider>
  );
};

export default App;
 

Child.js

 import React from 'react';
import { View, Text, Button } from 'react-native';
import { useMain } from './context/Context';

const Child = () => {
  const { dummy, setDummy } = useMain();
  const onPressLearnMore = () => {
    setDummy('c');
  };
  return (
    <View>
      <Text>This children {dummy}</Text>
      <Button onPress={onPressLearnMore} title="click" />
    </View>
  );
};

export default Child;
 

Context.js

 import React, { useContext, useEffect, useState } from 'react';
export const mainContext = React.createContext();

export function useMain() {
  return useContext(mainContext);
}
export function MyProvider({ children }) {
  const [dummy, setDummy] = useState('a');
  useEffect(() => {
    setDummy('b');
  }, []);
  function doNull() {
    console.log('do null');
  }
  const value = {
    dummy,
    setDummy,
  };
  return <mainContext.Provider value={value}>{children}</mainContext.Provider>;
}
 

Все работает, как и ожидалось, дочерний компонент может получить доступ к {dummy} и { setDummy }, так что я могу поместить все мои «общие» функции, состояния и так далее в контекст, который будет использоваться отовсюду.
Мне просто было интересно, смогу ли я получить к ним доступ в App.js тоже без кодирования другого компонента; это выглядит, если я импортирую

 import { useMain } from './context/Context';
 

и затем я добавляю это

 const { dummy, setDummy } = useMain();
 

для моего приложения это не работает, поэтому я думаю, что я могу получить доступ к вещам только из контекста только в дочернем, но первое представление тоже дочернее!

Должен ли я создавать новый компонент, если мне нужен доступ к контексту, или к нему можно получить доступ и с уровня MyProvider?

Первое представление действительно является дочерним элементом вашего провайдера, но App это не так, так что да, вам нужно будет извлечь свое представление как отдельный компонент, если вы хотите получить доступ к своему контексту из него.

 import { StyleSheet, Text, View } from 'react-native';
import Children from './Child';
import { MyProvider, useMain } from './context/Context';
import React from 'react';

const Container = () => {
  const { dummy, setDummy } = useMain();

  return (
    <View style={styles.container}>
      <Children />
      <StatusBar style="auto" />
    </View>
  )
}

const App = () => {
  return (
    <MyProvider>
      <Container />
    </MyProvider>
  );
};

export default App;