2016-05-01 20 views
1

Ich benutze reactJS und folgende Datei ist der clientseitige Code, den ich später mit browserify bündeln.
Ich kann Elemente wie Kontrollkästchen Eingang usw. erstellen, aber ich habe Probleme beim Erstellen Element für Router.
Das ist ok -Fehler bei der Verwendung von React.createElement

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

ich Problem habe mit folgenden 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); 

im Browser an ReactDOM.render ... wird der Fehler gemeldet als -

warning.js: 45 Warnung: React.createElement: type sollte nicht null sein, undefined, boolean oder number. Es sollte eine Zeichenfolge (für DOM Elemente) oder eine ReactClass (für zusammengesetzte Komponenten) sein. Überprüfen Sie die Render Methode von bound.

Als Referenz - 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; 
+0

Is'''TodoItem''' nachdem es erforderlich ist, nicht definiert? Wenn dies der Fall ist, versuchen Sie ".default" am Ende der Anweisung "require" hinzuzufügen. –

+0

@NickPineda Ich habe überprüft, das ist nicht der Fall, es ist definiert. – iajnr

+0

@RnjaiLambda - Ich denke, wenn Sie '' TodoItem.component''' mit dem geklonten Element neu zugeordnet - das könnte wo sein undefined rutschte. –

Antwort

1

Ich glaube, was Sie up ist Auslösung ist, dass Sie die Komponente als module.exports.component = TodoComponent exportieren.

Es ist nur sauberer es wie dies zu tun:

module.exports = TodoComponent;

Und auf diese Weise Sie die zusätzliche Punktnotation vermeiden und erfordern es so.

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

Da Sie nicht tun, dass Sie jetzt mit dieser TodoItem.component Sache arbeiten - und ich denke, es ist mit dem geklonten Elemente Neuzuweisung verursacht den Fehler.

Stattdessen weisen sie nur auf eine neue Variable var completedTodoItem = React.cloneElement...

Verwandte Themen