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);

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

Answer 2

您需要将所有子组件包装在createFactory中，我可以通过将Tag和Input包裹在{{{{}}中来使代码在没有该特定警告的情况下运行1}}。

jsbin

没有JSX的React.js - “警告：有东西直接调用React组件。请改用工厂或JSX”

2 个答案: