Javascript 将组件导出到另一个组件时出现问题_Javascript_Reactjs

Javascript 将组件导出到另一个组件时出现问题

javascript reactjs

Javascript 将组件导出到另一个组件时出现问题,javascript,reactjs,Javascript,Reactjs,尝试将组件从一个js文件传递到另一个js文件，但不断出现此错误 TypeError:无法指定对象“#”的只读属性“导出” 我有index.js import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import * as AnswerBox from './components/AnswerBox.js'; ReactDOM.render( <AnswerBox /&

尝试将组件从一个js文件传递到另一个js文件，但不断出现此错误

TypeError:无法指定对象“#”的只读属性“导出”

我有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')
);

如果我在index.js中有所有的js代码，这一切都可以实现，但一旦我将其拆分为组件js文件，就会出现这个错误

TypeError:无法指定对象“#”的只读属性“导出”

我知道这可能是显而易见的。

干杯

您不能将导入和导出模块混合使用

您应该使用导出默认值而不是

模块。导出

更新

module.exports = GetAnswerButton;

到

导入的方式也不正确。更新后使用导出默认值更新这些导入

import * as GetAnswerButton from './subcomponents/GetAnswerButton.js';

到

盒子

在您的情况下：

export default class AnswerBox扩展React.Component

并删除

module.exports

当我将其更改为时，我得到了此错误，而元素类型无效：应为字符串（对于内置组件）或类/函数（对于复合组件），但得到：objectKenneth做得更好，他的答案比我的更详细。当我将其更改为“取而代之，我得到此错误”时，元素类型无效：应为字符串（对于内置组件）或类/函数（对于复合组件），但得到：对象。请确保将您的导入语句更新为。应该从“./subcomponents/GetAnswerButton.js”导入GetAnswerButton；非常感谢，这是由于之前的另一个错误造成的。

<!DOCTYPE html>
<html>
 <head>
    <meta charset="utf-8">
    <title>React Landing Page</title>
 </head>
<body>
  <div id="root"></div>

</body>

.answerBox {
    border: 1px solid red;
    height:30px;
    width:75px;
}

module.exports = GetAnswerButton;

export default GetAnswerButton;

import * as GetAnswerButton from './subcomponents/GetAnswerButton.js';

import GetAnswerButton from './subcomponents/GetAnswerButton.js';

React from 'react';

import GetAnswerButton from './subcomponents/GetAnswerButton';

export default class AnswerBox extends React.Component{

    render(){
       return(
            <div>
                <div className="answerBox"></div>
                <GetAnswerButton />
            </div>
        )
    }
}

import React from 'react';

export default class GetAnswerButton extends React.Component {

    constructor() {
        super()
    }

    render() {
        return (
            <div>
                <button>Click Me</button>
            </div>
        )
    }
}

export default AnswerBox;