在另一个JSX文件中导入JSX文件

问题描述 投票:2回答:1

我是React的初学者。我在JSX文件中创建了一个通用的React组件,然后我打算在另一个JSX文件中导入它。但是,当我导入以下错误时返回ReferenceError: require is not defined

这是我的一般目标:

class Footer extends React.Component{
    render(){
        return (
            <div>Footer</div>
        );
    }
}
export default Footer;

这是另一个JSX文件:

import Footer from './generalPageFooter.jsx';
const contentNode = document.getElementById('div-content');
class AdminPanel extends React.Component{
    render(){
        return (
            <div>
                <h3>Sample Text</h3>
            </div>
        );
    }
}
class AdminPage extends React.Component{
    render(){
        return (
            <div>
                <h3>Sample Text</h3>
            </div>
        );
    }
}
ReactDOM.render(<AdminPage />, contentNode);

在HTML文件中,代码如下:

<body>
    <div id="div-content">
    </div>
    <script type="text/babel" src="/adminPage.jsx"></script>
</body>
reactjs import
1个回答
1
投票

您无法在浏览器上直接运行ES6 / JSX。需要将它们转换为“纯粹的”JS,然后浏览器才能理解并执行它们。

看看Babel

P / S:如果你从React开始,我建议来自Facebook的create-react-app

© www.soinside.com 2019 - 2024. All rights reserved.