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

Question

我试图在没有 JSX 的情况下使用 React.js 组件并收到这样的警告：

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

我访问过 link，但建议的 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

您还需要将所有子组件包装在 createFactory 中，我能够通过包装 Tag 和 Input 在 createFactory.

jsbin

Answer 2

React.createClass(spec) returns一个组件.

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

React.createFactory(component) returns 一个 factory 函数，可以用来创建一个 element.

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 即将停用，您应该以与创建 组件[=51= 相同的方式创建 dom elements ] 基于元素

^{编辑：看起来 React.DOM 暂时还在。}

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

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

Answer 3

对我来说。罪魁祸首是重组。我想将我的功能组件转换为纯组件。然后我用memo解决了。

使用来自 React 的备忘录：

import React, { memo } from 'react';

const Component = (props) {
return (
// Component code
)
}

// Wrap component using "memo" HOC
export default memo(Component);
Using pure from recompose:

import React from 'react';
import { pure } from 'recompose';

const Component = (props) {
return (
// Component code
)
}

// Wrap component using "pure" HOC
export default pure(Component);

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

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

javascript

reactjs

react-jsx