使用 React.createElement 时出错

Question

I am using reactJS and following file is the client side code which i later bundle using browserify.
I am able to create elements such as check box input etc. but i am having issue while creating element for Router.
This is ok -

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

I am having issue with below code -

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

In the browser at ReactDOM.render ... the error is reported as -

warning.js:45 Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of bound .

For reference - 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;

Answer 1

I believe what is tripping you up is that you are exporting the component as module.exports.component = TodoComponent .

Its just cleaner to do it like this:

module.exports = TodoComponent;

And that way you can avoid the extra dot notation and require it like this.

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

Since you didn't do that you are now working with this TodoItem.component thing - and I think reassigning it with the cloned element is causing the error.

Instead, just assign it to a new variable var completedTodoItem = React.cloneElement...