React 新手，尝试将一个组件从一个 js 文件传递到另一个 js 文件，但一直出现此错误
类型错误:无法分配给对象“#”的只读属性“导出”
我有 index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import * as AnswerBox from './components/AnswerBox.js';
ReactDOM.render(
<AnswerBox />,
document.getElementById('root')
);
然后我在组件文件夹中有 AnswerBox.js
import React from 'react';
import ReactDOM from 'react-dom';
import * as GetAnswerButton from './subcomponents/GetAnswerButton.js';
class AnswerBox extends React.Component{
render(){
return(
<div>
<div className="answerBox"></div>
<GetAnswerButton />
</div>
)
}
}
module.exports = AnswerBox;
然后在名为 subcomponents 的组件子文件夹中，我有另一个名为 GetAnswerButton.js 的文件
import React from 'react';
import ReactDOM from 'react-dom';
class GetAnswerButton extends React.Component {
constructor() {
super()
}
render() {
return (
<div>
<button>Click Me</button>
</div>
)
}
}
module.exports = GetAnswerButton;
我有 index.html 和 index.js 一样级别
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>React Landing Page</title>
</head>
<body>
<div id="root"></div>
</body>
和 index.css 也与 index.js 在同一文件夹级别
.answerBox {
border: 1px solid red;
height:30px;
width:75px;
}
如果我在 index.js 中有所有的 js 代码，一切正常，但是一旦我将它拆分为组件 js 文件，我就会收到此错误。
类型错误:无法分配给对象“#”的只读属性“导出”
我知道这可能很明显。 干杯
最佳答案
您不能混合使用 import 和 module.exports
您应该使用export default 而不是module.exports
更新
module.exports = GetAnswerButton;
到
export default GetAnswerButton;
您导入的方式也不正确。在您更新为使用export default 后更新这些import from
import * as GetAnswerButton from './subcomponents/GetAnswerButton.js';
到
import GetAnswerButton from './subcomponents/GetAnswerButton.js';
关于javascript - React 菜鸟在将组件导出到另一个组件时遇到问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49673357/