ReactJS: React.render не является функцией, а React.createElement не является функцией

Я нашел проблему в своем коде, когда пытался использовать эти две функции в моей версии React версии 15.2.0, тем не менее, я нашел обходной путь, но я хотел бы знать, есть ли лучшее решение.

//app.jsx
var React = require('react');

var ThumbnailList = require('./thumbnail-list');

var options = {
     ThumbNailData: [{
     title : 'Download the ISO',
     number : 32,
     header : 'Learning React',
     description: 'The best library for creating fast and dynamic websites.',
     imageUrl : 'image source'
    },{
     title : 'Download the ISO',
     number : 64,
     header : 'Learning Gulp',
     description: 'Speed your development framework!',
     imageUrl : 'image source'
    }],
};

var element = React.createElement(ThumbnailList,options);
React.render(element, document.querySelector('.container'));

Итак, всякий раз, когда я пытаюсь запустить файл index.html, ничего не отображается, но эта первая ошибка приходит в консоль: React.render не является функцией. Я обнаружил, что это происходит потому, что эта новая версия React нуждается в реагировании, то есть

//app.jsx
var React = require('react-dom');

var ThumbnailList = require('./thumbnail-list');

var options = {
     ThumbNailData: [{
     title : 'Download the ISO',
     number : 32,
     header : 'Learning React',
     description: 'The best library for creating fast and dynamic websites.',
     imageUrl : 'image source'
    },{
     title : 'Download the ISO',
     number : 64,
     header : 'Learning Gulp',
     description: 'Speed your development framework!',
     imageUrl : 'image source'
    }],
};

var element = React.createElement(ThumbnailList,options);
React.render(element, document.querySelector('.container'));

Теперь проблема решена, но теперь возникает вторая проблема при попытке снова запустить index.html: React.CreateElement не является функцией.. Я сделал, чтобы добавить еще одну переменную, требующую реакции, т.е.

var React = require('react-dom');
var React2 = require('react');
var ThumbnailList = require('./thumbnail-list');

var options = {
    ThumbNailData: [{
        title : 'Download the ISO',
        number : 32,
        header : 'Learning React',
        description: 'The best library for creating fast and dynamic  websites.',
        imageUrl : 'image-source'
    },{
        title : 'Download the ISO',
        number : 64,
        header : 'Learning Gulp',
        description: 'Speed your development framework!',
        imageUrl : 'image-source'
   }],
};

var element = React2.createElement(ThumbnailList,options);
React.render(element, document.querySelector('.container'));

В нескольких словах, чтобы решить проблему React.render

var React = require('react-dom')

чтобы решить проблему React.createElement

var React2 = require('react')

Мои вопросы:

  • Почему эта реакция создала проблему с React.createElement?

  • Это из-за этой новой версии React?

  • Есть ли лучший подход для решения этих проблем без необходимости ссылаться на реакцию и реагировать?

Любые мысли и комментарии приветствуются;)

Ответы

Ответ 1

Прежде всего, начиная с React v0.14, появился новый пакет под названием react-dom. Он абстрагирует "среду", в которой вы будете запускать React, и в вашем случае это браузер.

https://facebook.github.io/react/blog/2015/10/07/react-v0.14.html#two-packages-react-and-react-dom

Итак, теперь у вас есть два пакета: "react" для создания ваших компонентов React и "react-dom" для "интеграции" React с браузером, вам нужно вызывать правильные методы, которые предоставляет каждый из них.

Затем, отвечая на ваши вопросы:

Почему реактивный дом создал проблему с React.createElement?

Пакет с React.createElement - это react, а не react-dom.

Это из-за этой новой версии React?

Да, вы больше не можете звонить в React.render (из пакета react), вам нужно использовать ReactDOM.render (из пакета react-dom).

Есть ли лучший подход для решения этих проблем без необходимости реагировать и реагировать?

Я не вижу в этом "проблемы", вам просто нужно знать, что теперь есть специальный пакет для управления DOM. Кроме того, это "хороший" шаблон, потому что если вы когда-нибудь захотите визуализировать свои компоненты в виде HTML (для рендеринга с использованием сервера), вам просто нужно адаптировать некоторые вещи, и ваш код будет таким же.

Ответ 2

Я получаю сообщение об ошибке: "React.createElement не является функцией", и для моей ситуации исправление должно было изменить это:

import * as React from "react";
import * as ReactDOM from "react-dom";

НА ЭТО:

import React from "react";
import ReactDOM from "react-dom";

Это было в файле TypeScript, поэтому я не уверен, что оно применимо к не-TypeScript или нет.