时间戳

首页 > 解决方案 > ReactDOM.render 不接受 JSX

javascript - ReactDOM.render 不接受 JSX

问题描述

我无法让 ReactDOM.render(...) 接受任何 JSX 标签，但是如果我使用 React.createElement(...) 它可以工作。

这是我的index.jsx文件：

import React from "react";
import ReactDOM from "react-dom";

// THIS WORKS!
//var elem = React.createElement('h1',{},"Hello");
//ReactDOM.render(elem, document.getElementById("content"));

// THIS DOESN'T WORK!
ReactDOM.render(<h1>Hello World!</h1>, document.getElementById("content"));

在index.html文件中，某处有一个 id="content" 的 div。

这是我的package.json文件：

{
  "name": "static",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack -p --progress --config webpack.config.js",
    "dev-build": "webpack --progress -d --config webpack.config.js",
    "watch": "webpack --progress -d --config webpack.config.js --watch"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/preset-env": "^7.4.5",
    "@babel/preset-react": "^7.0.0",
    "webpack": "^4.35.0",
    "webpack-cli": "^3.3.5"
  },
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ]
}

这是我的webpack.config.js文件：

const webpack = require('webpack');

const config = {
    entry:  __dirname + '/js/index.jsx',

    output: {
        path: __dirname + '/dist',
        filename: 'bundle.js',
    },

    resolve: {
        extensions: ['.js', '.jsx', '.css']
    },
};
module.exports = config;

module: {
  rules: [
    {
      test: /\.jsx?/,
      exclude: /node_modules/,
      use: 'babel-loader'
    }
  ]
}

我得到的错误是：

ERROR in ./js/index.jsx 11:16
Module parse failed: Unexpected token (11:16)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| 
| 
> ReactDOM.render(<h1>Hello World!</h1>, document.getElementById("content"));
|

===============================================

解决方案：

第一个webpack.config.js是错误的（见接受的答案）。之后，我必须安装babel-loader，npm install -D babel-loader @babel/core @babel/preset-env webpack然后在其他配置的同一路径创建.babelrc文件。文件，内容如下：

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

标签： javascriptreactjsdomwebpackjsx

解决方案

你把规则放在错误的地方。

正确的配置是：

const webpack = require('webpack');

const config = {
    entry:  __dirname + '/js/index.jsx',

    output: {
        path: __dirname + '/dist',
        filename: 'bundle.js',
    },

    resolve: {
        extensions: ['.js', '.jsx', '.css']
    },
    module: {
      rules: [
        {
          test: /\.jsx?/,
          exclude: /node_modules/,
          use: 'babel-loader'
        }
      ]
    }
};
module.exports = config;

推荐阅读