React.createElementの使用中にエラーが発生しました

Question

私はreactJSを使用しています。後のファイルは後でbrowserifyを使用してバンドルするクライアント側のコードです。
チェックボックス入力などの要素を作成することはできますが、ルータの要素を作成する際に問題が発生しています。
これはokです -

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：型はnull、 未定義、ブール値、または数値であってはなりません。文字列（DOM 要素の場合）またはReactClass（複合コンポーネントの場合）でなければなりません。 レンダリング方法がboundであることを確認してください。 libに/コンポーネント/ 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

は、私はあなたをトリップされているものと考えているあなたはmodule.exports.component = TodoComponentとして部品を輸出しているということです。

そのわずかクリーナーはこのようにそれを行うには：

module.exports = TodoComponent;

そして、あなたは余分なドット表記を避けることができ、その方法は、このようにそれを必要とします。

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

あなたは今、このTodoItem.component事で作業していることをしませんでしたので - と私はクローン化された要素でそれを再割り当てすると、エラーの原因となっていると思います。

代わりに、ちょうどそれが必要とされた後var completedTodoItem = React.cloneElement...