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

React.js without JSX - "Warning: Something is calling a React component directly. Use a factory or JSX instead"

提问by Kosmetika

I'm trying to use React.js component without JSX and receive such warning:

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

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

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

I've visited link but suggested createFactorysolution didn't help me :/

我访问过链接，但建议的createFactory解决方案对我没有帮助：/

app.js

应用程序.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

标签输入.js

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

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

I cannot figure out what is the problem here?

我不知道这里有什么问题？

回答by Brigand

React.createClass(spec)returns a component.

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

React.createElement(component, props, ...children)creates an element.

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

React.createFactory(component)returns a factoryfunction, which can be used to create an element.

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

React.createFactory(a)(b, c, d)is the same as React.createElement(a, b, c, d).

React.createFactory(a)(b, c, d)与 相同React.createElement(a, b, c, d)。

You get the warning when you call a componentdirectly, like component(). If you want to call it like a function, use createFactory

直接调用组件时会收到警告，例如component(). 如果你想像函数一样调用它，使用 createFactory

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

Or use createElement:

或者使用 createElement：

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

In 0.13 this will give an error instead of a warning:

在 0.13 中，这将给出错误而不是警告：

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

Also because React.DOM is going away, you should create dom elementsthe same way you create componentbased elements

也正因为React.DOM会消失，你应该创建DOM元素创建以同样的方式组成的基于要素

^{Edit: looks like React.DOM is sticking around for now.}

^{编辑：看起来 React.DOM 现在还在使用。}

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

// or

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

_{Bold used to show consistent terms. ...childrenmeans any number of child arguments}

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

回答by Nick Tomlin

You need to wrap all of your child components in createFactoryas well, I was able to get your code to run without that specific warning by wrapping Tagand Inputin createFactory.

您还需要将所有子组件包装起来createFactory，我能够通过包装Tag和Inputin使您的代码在没有特定警告的情况下运行createFactory。

jsbin

jsbin