Использование контекста React в React 360 - Инвариантное нарушение: недопустимый тип элемента - PullRequest
Новая
       16

Использование контекста React в React 360 - Инвариантное нарушение: недопустимый тип элемента

0 голосов
/ 13 октября 2018

Я работаю над приложением VR, использующим React 360, и для обновления миров мне нужно сделать обратный вызов доступным для компонентов, которые находятся глубоко в дереве.Я не хочу передавать обратный вызов полностью по дереву, поэтому я попробовал React Context, но продолжаю получать следующую ошибку: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

Вот мой код:

Создание контекста реагирования 

import React from 'react';

export const CurrentWorld = React.createContext({
    updateWorld: () => {}
});

Файл index.js 

import React from 'react';
import {
  View,
  AppRegistry,
  NativeModules,
} from 'react-360';
import ReactDOM from 'react-dom'
import {CurrentWorld} from './Context/CurrentWorld'
import LoadWorld from './World/LoadWorld'
import LoadingMessage from './Helpers/LoadingMessage'
console.log(CurrentWorld)
// get something similar to window.location
const Location = NativeModules.Location;

export default class BoxApp360 extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      worldID: null,
    }
  }

  componentWillMount() {
    this.getParamsFromUrl()
  }

  render() {
    // console.log(this.state.worldID)
    return (
      <View>
        {(null === this.state.worldID)
          && <LoadingMessage />}

        {(0 === this.state.worldID)
          && <LoadingMessage message="Looks like there is no world to load" />}

        {(null !== this.state.worldID)
          && (0 !== this.state.worldID)
          && <CurrentWorld.Provider value={{
                updateWorld: this.updateWorld.bind(this)
              }}>
              <LoadWorld
                worldID={this.state.worldID}
                onWorldUpdate={this.updateWorld.bind(this)} />
            </CurrentWorld.Provider>}
      </View>
    );
  }

  updateWorld(newID) {
    // console.log(newID)
    this.setState({worldID: newID})
  }

  getParamsFromUrl() {
    if (Location.search) {
      // load the word id
      const worldParam = Location.search.match(/worldID=([0-9]*)/)
      if (null !== worldParam) {
        this.setState({
          worldID: worldParam[worldParam.index]
        })
      }
    } else {
      this.setState({
        worldID: 0
      })
      console.warn('We do not have a word ID')
    }
  }
};

AppRegistry.registerComponent('BoxApp360', () => BoxApp360);

console.log сразу после импорта, показывает это сообщение об ошибке (которое говорит мне, что ReactContext был успешно создан).

Если я удаляю компонент CurrentWorld.Provider, LoadWorld работает без проблем, и приложение работает должным образом.

Чего мне не хватает?Разве я не могу использовать React Context с React 360 (я имею в виду, что React прав в React? Контекст является его частью)?

Я хотел избежать использования Redux, поскольку React Context поставляется с React, и мне нужно сделать только один обратный вызов доступным для нижестоящих компонентов.Вряд ли это звучит как причина для включения совершенно новой зависимости.Но в этот момент, я должен просто сдаться и пойти с Redux?

Спасибо за помощь!

...