使用 React.createElement 时出错答案

【问题标题】：Error while using React.createElement使用 React.createElement 时出错
【发布时间】：2016-08-26 01:17:55
【问题描述】：

我正在使用 reactJS，以下文件是我稍后使用 browserify 捆绑的客户端代码。
我能够创建诸如复选框输入等元素，但在为路由器创建元素时遇到问题。
没关系 -

React.createElement('input', { ref: 'done', type: 'checkbox', defaultChecked: this.state.done, onChange: this.onChange })

下面的代码有问题 -

var React = require('react');
var ReactDOM = require('react-dom');
var TodoItem = require('../lib/components/todo-item');
var Router = require('react-router').Router;
var Route = require('react-router').Route;
var browserHistory = require('react-router').browserHistory;
var renderTarget = document.getElementById('content');
TodoItem.component = React.cloneElement(TodoItem.component, {done: false, name: 'Write Tutorial'});
var TodoItemFactory = React.createFactory(TodoItem.component);

ReactDOM.render(
  React.createElement(
    Router,
    { history: browserHistory },
    React.createElement(Route, {path: "/", component: TodoItemFactory })
  ),
  renderTarget);

在浏览器中 ReactDOM.render ... 报错为 -

warning.js:45 警告：React.createElement：类型不应为空，未定义、布尔值或数字。它应该是一个字符串（对于 DOM 元素）或 ReactClass（用于复合组件）。检查渲染 bound的方法。

供参考 - lib/components/todo-item.js -

'use strict';

var React = require('react');

var TodoComponent = React.createClass({
  displayName: 'TodoItem',

  /**
   * Lifecycle functions
   **/
  getInitialState: function getInitialState() {
    return { done: this.props.done };
  },

  componentDidMount: function componentDidMount() {},

  render: function render() {
    return React.createElement(
      'label',
      null,
      React.createElement('input', { ref: 'done', type: 'checkbox', defaultChecked: this.state.done, onChange: this.onChange }),
      this.props.name
    );
  },

  /**
   * Event handlers
   **/
  onChange: function onChange(event) {
    this.setDone(event.target.checked);
  },

  /**
   * Utilities
   **/
  setDone: function setDone(done) {
    this.setState({ done: !!done });
  }
});

module.exports.component = TodoComponent;

【问题讨论】：

是TodoItem在需要之后未定义吗？如果是这样，请尝试在其 require 语句的末尾添加“.default”。
@NickPineda 我检查了，事实并非如此，它已定义。
@RnjaiLambda - 我想当你用克隆的元素重新分配TodoItem.component 时 - 这可能是未定义的地方。
@NickPineda 我也检查了，它已定义。
@NickPineda 它不是未定义的，但我证实当时出现了一些问题。让我调试并返回。谢谢！

标签： javascript reactjs react-native jsx

【解决方案1】：

我相信让您感到困惑的是您将组件导出为 module.exports.component = TodoComponent 。

这样做更干净：

module.exports = TodoComponent;

这样你就可以避免额外的点符号并像这样要求它。

var TodoItem = require('../lib/components/todo-item');

由于您没有这样做，因此您现在正在使用这个 TodoItem.component 东西 - 我认为使用克隆的元素重新分配它会导致错误。

相反，只需将其分配给一个新变量var completedTodoItem = React.cloneElement...

【讨论】：