0

所以由于某种原因，react 没有在我的简单应用程序中呈现我的 txt 属性。这是我在 App.js 文件中的代码：

import React from 'react';
import ReactDOM from 'react-dom';
class App extends React.Component {
  render() {
    return <h1> {this.props.txt}</h1>

  }
}
ReactDOM.render(<App txt="Hello world"/>, document.getElementById('app'))

这是我在 chrome 开发人员工具控制台中遇到的错误：

index.js:9576 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).warning @ index.js:9576createElement @ index.js:26847(anonymous function) @ index.js:7558__webpack_require__ @ index.js:20(anonymous function) @ index.js:48__webpack_require__ @ index.js:20(anonymous function) @ index.js:40(anonymous function) @ index.js:43
index.js:8492 Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
4

2 回答 2

0

代码很好..一定是其他问题（也许是 webpack 或 babel 设置？）

See example below

https://jsfiddle.net/9dnu3pt8/

于 2016-08-04T23:22:12.983 回答
0

你的代码很好，应该可以工作，你的环境有问题，你在使用 webpack 吗？如果是这样，您需要添加一些预设以使用 ecma 2015。

遵循package.json文件样本

{
  "name": "project",
  "version": "0.0.0",
  "description": "",
  "author": "",
  "license": "BSD-2-Clause",
  "dependencies": {
    "react-dom": "~15.3.0",
    "react": "~15.3.0"
  },
  "devDependencies": {
    "webpack": "~1.13.1",
    "babel-loader": "~6.2.4",
    "babel-preset-react": "~6.11.1",
    "babel-core": "~6.11.4",
    "babel-preset-es2015": "~6.9.0"
  }
}

并webpack.config.js归档

module.exports = {
    entry: "./app/App.js",
    output: {
        filename: "public/bundle.js"
    },
    module: {
        loaders: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel',
                query: {
                    presets: ['react', 'es2015']
                }
            }
        ]
    }
}
于 2016-08-04T23:22:16.167 回答