Контекст React 16.3 работает в Интернете, но не в React Native

Я реализовал некоторые функции, используя новый контекстный API React 16.3. Это отлично работает в браузере, однако один и тот же код в React Native никогда не работает (с использованием react-native-web для компиляции как в браузер, так и в мобильное приложение expo, которое отлично работало до попытки добавить контекст). Когда он терпит неудачу, он регистрирует ошибку:

Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

Обычно это означает, что я где-то испортил импорт / экспорт по умолчанию / экспорт, но в этом случае они, похоже, в порядке. Эта ошибка возникает только тогда, когда я пытаюсь использовать компонент createContext (). Это происходит, когда я создаю провайдера, независимо от того, есть у меня потребитель или нет.

Root.js

export const RootContext = React.createContext();

export default class Root extends React.Component {
    render() {
        return (
            <View>
                <RootContext.Provider value = {'testContextValue'}>
                    <ExampleChildElement />
                </RootContext.Provider>
            </View>
        );
    }
}

ExampleChildElement.js

import { RootContext } from '../Root.js'

export class ExampleChildElement extends React.Component {
    render() {
        return (
            <RootContext.Consumer>
                {rootContext => 
                   <View />
                }
            </RootContext.Consumer>
        );
    }
}

Что я здесь делаю не так?

Похоже на ошибку в React 16.3. Вы используете последнюю версию кандидата на выпуск или предыдущую альфа-версию?

Matt Browne 31.03.2018 22:04

Используется выпуск 16.3.0, выпущенный два дня назад. Моя реакция на родную версию отстает на несколько версий, но эта ошибка кажется постоянной, если я обновлюсь до более новых версий. Вот соответствующая часть моего package.json: "react": "^16.3.0", "react-dom": "^16.3.0", "react-native": "0.52.0", "react-native-web": "^0.5.1",

Kris 31.03.2018 22:14

Компонент Consumer в новом контекстном API возвращает объект. Более старые версии средств визуализации React, такие как ReactDOM и react-test-renderer (и я тоже представляю RN), не знают, что делать с объектом, поэтому вам нужно обновить RN и RNW, чтобы это заработало. Последняя версия RN работает с новым контекстом, хотя насчет RNW не уверен.

benadamstyles 09.04.2018 12:03

Как бы то ни было, я наконец получил контекст, работающий как в нативном, так и в веб-интерфейсе. Все еще не уверен, в чем проблема, потому что я смог исправить ее, только полностью выполнив новую сборку create-react-native-app и вставив в нее свой исходный код. Версия response / react-dom, с которой он работает, теперь 16.3.0-alpha.1, и если я когда-нибудь установлю ее на 16.3.0 или 16.3.1, она сломается.

Kris 10.04.2018 04:58
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
3
4
915
0

Другие вопросы по теме