web-dev-qa-db-ja.com

JSXなしのReact.js-「警告：何かがReactコンポーネントを直接呼び出しています。代わりにファクトリまたはJSXを使用してください」

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

ここで何が問題なのかわかりませんか？

javascriptreactjsreact-jsx
14
Kosmetika

React.createClass(spec)はcomponentを返します。

React.createElement(component, props, ...children)は要素を作成します。

React.createFactory(component)はfactory関数を返します。これを使用して、elementを作成できます。

React.createFactory(a)(b, c, d)はReact.createElement(a, b, c, d)と同じです。

component()のように、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 elementsを作成するのと同じ方法で作成する必要がありますcomponent based elements

編集：React.DOMは今のところ固執しているようです。

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

// or

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

太字は一貫した用語を示すために使用されます。 ...childrenは任意の数の子引数を意味します

25
Brigand

すべての子コンポーネントもcreateFactoryでラップする必要があります。TagとInputをcreateFactoryでラップすることにより、特定の警告なしにコードを実行することができました。

jsbin

2
Nick Tomlin