Question

我是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>

Answer 1

您无法在浏览器上直接运行ES6 / JSX。他们需要被转化为纯粹的＆＃34; JS然后浏览器可以理解并执行它们。

查看Babel。

P / S：如果你是从React开始，我建议来自Facebook的create-react-app。

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

1 个答案: