reactjs - 如何在反应样板中使用 jsx 而不是 js 扩展?
问题描述
我只想在https://github.com/react-boilerplate/react-boilerplate/中添加 jsx 页面
下面是我要添加的密码忘记页面 jsx 文件内容。
import React from 'react';
import { connect } from 'react-redux';
import {Link, Route} from 'react-router-dom';
class PwdForgotPage extends React.Component {
render() {
return (
<div className="col-md-6 col-md-offset-3">
Password forgot.
<button className="btn btn-link">Back</button>
</div>
);
}
}
function mapStateToProps(state) {
const { registering } = state.registration;
return {
registering,
};
}
const connectedPwdForgotPage = connect(mapStateToProps)(PwdForgotPage);
export { connectedPwdForgotPage as PwdForgotPage };
但是,如果我使用 jsx 扩展,则无法按如下方式运行。
Module parse failed: C:\.....\frontend\app\containers\PwdForgotPage\PwdForgotPage.jsx Unexpected token (8:6)
You may need an appropriate loader to handle this file type.
| render() {
| return (
| <div className="col-md-6 col-md-offset-3">
| Password forgot.
| <button className="btn btn-link">Back</button>
如果我使用 js 扩展,它可以工作。如何更改样板中的配置以支持 jsx 扩展?
解决方案
您需要jsx
在启用 babel 的 webpack 配置中添加扩展规则babel-loader
。
{
test: /\.jsx?$/, // notice optional x?
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: options.babelQuery,
},
},
或者主观上更具可读性/\.(js|jsx)$/
推荐阅读
- c++ - 对 `boost::filesystem::path::make_preferred() 的未定义引用是否修复?
- flutter - 如何在Appbar左侧创建按钮[flutter]
- python - 如何在 sklearn 中应用 Leave-one-Group-out 交叉验证?
- apache - Apache 2.4 需要客户端 SSL 证书或白名单 IP
- wordpress - 403 Forbidden 您无权访问/在此服务器上安装新的 WordPress
- javascript - 严格模式下的 JavaScript var 作用域
- amazon-cognito - 服务器登录到 Amazon Cognito
- kotlin - 从同一行上的多个变量创建 arrayOf
- r - 如何并行化 lightgbm 拟合?
- c++ - 播放按钮声音而不停止在后台运行的音乐