React.createElement:类型不应为null或未定义.创建/渲染组件时

React.createElement: type should not be null, undefined.. When creating/rendering components

本文关键字：创建 未定义 组件 null createElement 类型 React      更新时间：2023-09-26

因此完整的错误如下。。。

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 `IndexBody.

我不知道为什么我会收到这个错误，我认为我正确地创建了我的组件，但也许另一只眼睛可以看到我做错了什么。

索引.jsx:

import React, { PropTypes } from 'react';
import ReactDOM from 'react-dom';
import Test from './app';

class IndexBody extends React.Component {
  render() {
    return (
      <div>
        <h1>This will show the Test Component</h1>
        <Test />
      </div>
    );
  }
}
ReactDOM.render(<IndexBody />, document.getElementById('react-app'))

以及我从中导入的测试组件/app.jsx

import React, { PropTypes } from 'react';
import ReactDOM from 'react-dom';

class Test extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      hello: 'hello world',
    };
  }
  render() {
    console.log('WORKS'); // logs fine
    return (
      <div>
        <h1>{this.state.hello}</h1>
      </div>
    );
  }
}
ReactDOM.render(<Test/>, document.getElementById('react-app'));

我可以显示日志，但它不想渲染组件。我是否错误地创建了组件？提前感谢您的帮助！

不能从app.jsx导出Test。

这意味着它不可用作导入，因此undefined也不可用。

根据您当前的代码，您需要添加：

export default Test;

至CCD_ 4。

Dave是正确的，你需要在App.jsx的底部执行export default Test;。此外，你在整个应用程序中只想要一个ReactDOM.render（）函数，index.jsx加载组件树，所有这些都会在一个文件（index.jsx）中传递给ReactDOM.prnder（

因此，在您的情况下，只需将app.jsx更改为此，您就应该从事业务：

import React, { PropTypes } from 'react';
import ReactDOM from 'react-dom';

class Test extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            hello: 'hello world',
        };
    }
    render() {
        console.log('WORKS'); // logs fine
        return (
            <div>
                <h1>{this.state.hello}</h1>
            </div>
        );
    }
}
export default Test;
相关文章：