没有JSX的React.js - "警告:有些东西直接调用React组件.请使用工厂或JSX代替"

Question

我正在尝试使用没有JSX的React.js组件并收到这样的警告:

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

我无法弄清楚这里有什么问题？

Answer 1

React.createClass(spec)返回一个组件.

React.createElement(component, props, ...children)创造一个元素.

React.createFactory(component)返回一个工厂函数,可用于创建元素.

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 元素创建以同样的方式组成的基于要素

^{编辑:看起来像React.DOM现在正在坚持.}

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

// or

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

_{粗体用于表示一致的术语. ...children表示任意数量的子参数}