使用React.createElement时出错
Error while using React.createElement
我使用的是reactJS,下面的文件是客户端代码,我稍后使用browserfy将其捆绑在一起
我可以创建元素,如复选框输入等,但我在为路由器创建元素时遇到了问题
这没关系-
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:type不应为null,未定义、布尔值或数字。它应该是一个字符串(对于DOM元素)或ReactClass(用于复合组件)。检查渲染CCD_ 1。
供参考-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;
我相信让您感到困惑的是,您正在将组件导出为module.exports.component = TodoComponent
。
这样做更干净:
module.exports = TodoComponent;
这样你就可以避免额外的点符号,并要求它像这样。
var TodoItem = require('../lib/components/todo-item');
由于您没有这样做,现在您正在处理TodoItem.component
这件事——我认为用克隆的元素重新分配它会导致错误。
相反,只需将其分配给一个新变量var completedTodoItem = React.cloneElement...
相关文章:
- javascript中的数组出错
- 节点Js:How to catch a“;没有这样的文件或目录“;读取线模块出错
- 如何使用nodes和.createElement(“b”)将文本加粗
- createElement("a") - FireFox JavaScript
- 在Meteor项目中安装并包含npm模块后出错
- 解析JSON并从中删除对象会出错
- AngularJS指令出错-无法读取属性'编译'的未定义
- 使用javascript在MVC中查找网格长度时出错
- 尝试调用AngularJS上的函数时出错
- Google 脚本:用于创建日历活动的脚本运行时不会出错,但不会执行任何操作
- 全局安装gull后出错
- 我在代码点火器中出错
- Java脚本将URL转换为已保存的URL时出错
- Backbone.js将模型绑定到视图时出错
- 将javascript代码转换为jquery代码时出错
- 加载db.json时出错
- 在运行时创建元素时移到一边时出错
- 失败:等待Protractor与页面同步时出错:“”;在窗口上找不到角度”;
- 重置表单字段时出错
- 使用React.createElement时出错