React.js без JSX - "Предупреждение: что-то вызывает компонент React напрямую. Вместо этого используйте factory или JSX"

Я пытаюсь использовать компонент React.js без JSX и получать такое предупреждение:

Warning: Something is calling a React component directly. Use a factory or JSX instead. See: http://fb.me/react-legacyfactory

Я посетил ссылку, но предлагаемое решение createFactory не помогло мне:/

app.js

var React = require('react/addons');
var TagsInput = React.createFactory(require('./tagsinput')); // no luck

var TagsComponent = React.createClass({
  displayName: "TagsComponent",
  saveTags: function () {
    console.log('tags: ', this.refs.tags.getTags().join(', '));
  },

  render: function () {
    return (
      React.createElement("div", null,
        React.createElement(TagsInput, {ref: "tags", tags: ["tag1", "tag2"]}),
        React.createElement("button", {onClick: this.saveTags}, "Save")
      )
    );
  }
});

React.render(React.createElement(TagsComponent, null), document.getElementById('tags'));

tagsinput.js

https://raw.githubusercontent.com/olahol/react-tagsinput/master/react-tagsinput.js

Я не могу понять, в чем проблема?

Ответ 1

React.createClass(spec) возвращает компонент.

React.createElement(component, props, ...children) создает элемент .

React.createFactory(component) возвращает функцию factory, которая может быть использована для создания элемента .

React.createFactory(a)(b, c, d) совпадает с React.createElement(a, b, c, d).

Вы получите предупреждение, когда вы вызываете компонент напрямую, например component(). Если вы хотите называть его как функцию, используйте createFactory

var factory = React.createFactory(component);
var element = factory(props, ...children);

Или используйте createElement:

var element = React.createElement(component, props, ...children);

В 0.13 это приведет к ошибке вместо предупреждения:

var element = component(props, ...children);

Также, поскольку React.DOM уходит, вы должны создать dom элементы так же, как вы создаете компонент на основе элементов

^{Edit: похоже, что React.DOM сейчас торчит.}

var div = React.createFactory('div');
var element = div(props, ...children);

// or

var element = React.createElement('div', props, ...children);

_{Жирный шрифт, используемый для отображения согласованных терминов. ...children означает любое количество дочерних аргументов}

Ответ 2

Вам также нужно обернуть все дочерние компоненты в createFactory, я смог запустить ваш код без этого специального предупреждения, обернув Tag и Input в createFactory.

jsbin