使用React.createElement时出错

Error while using React.createElement

本文关键字:出错 createElement React 使用      更新时间:2023-09-26

我使用的是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...