Question

是React的新手，并尝试将一个组件从一个js文件传递到另一个js文件，但不断收到此错误

TypeError：无法分配给对象'＃'

的只读属性'exports'

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

然后我在components文件夹中有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;

然后在一个名为子组件的组件的子文件夹中，我有另一个名为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文件，我就会收到此错误。

TypeError：无法分配给对象'＃'

的只读属性'exports'

我知道它可能是显而易见的。欢呼声

Answer 1

您无法混合导入和 module.exports

您应该使用导出默认而不是module.exports

更新

module.exports = GetAnswerButton;

到

export default GetAnswerButton;

您导入的方式也不正确。更新后使用导出默认从

更新这些导入

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

到

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

Answer 2

箱

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;

React noob在将组件导出到另一个组件时遇到问题

2 个答案: