时间戳

首页 > 解决方案 > React 导入和渲染其他组件在没有工具的情况下无法正常工作

javascript - React 导入和渲染其他组件在没有工具的情况下无法正常工作

问题描述

我正在尝试在另一个组件中呈现一个组件，然后将该代码呈现到一个 html 文件中。我尝试了我所知道的一切，但无法开始工作。我是 React JS 的新手，想在没有任何工具和捆绑程序的情况下尽可能简单地学习它。因此，我在我的 html 文件中链接 react、react-dom 和 babel，并创建了两个不同的组件 js 文件。您能否查看代码并指导它有什么问题以及如何修复它。我已经尝试在类 Header 之前导出默认值，然后在 App.js 文件中尝试从 './Header' 导入 {Header}; 但仍然没有工作。谢谢你。

/* Header Component in a Header.js file */

class Header extends React.Component 
{
    render() 
    {
        return(
            <div>
                <h1>My Beautiful Website</h1>
                <hr />
            </div>
        );
    }
}

export default Header;



/* App Component in App.js file */

import Header from './Header';

class App extends React.Component 
{
    render()
    {
        return (
            <div>
               <Header />
                <section>
                    <h2>I am trying to make this React thing work</h2>
                    <p>
                        It should be easy to do I am trying to do but may be I am a little confused about 
                        things in React JS. Sooner or later though everything gets easier and most importantly
                        crystal clear to the human mind when you persevere. I believe.
                    </p>
                </section>
            </div>

        );
    }
}

ReactDOM.render(<App />, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/0.14.8/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>


<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>React Hello world</title>
</head>
<body>
    <div id="root"></div>

    <script src="./App.js" type="text/babel"></script>
    
</body>
</html>

标签： javascriptreactjs

解决方案

如果要使用，则必须将附加属性传递给脚本，并且transform-es2015-modules-umdimportexportjsx

<script data-plugins="transform-es2015-modules-umd" src="./Header.js" type="text/babel"></script>
<script data-plugins="transform-es2015-modules-umd" src="./App.js" type="text/babel"></script>

例子

<script src="https://unpkg.com/react/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.14.0/babel.min.js"></script>
<div id="root"></div>
<script type="text/babel" data-plugins="transform-es2015-modules-umd">
class Header extends React.Component 
{
    render() 
    {
        return(
            <div>
                <h1>My Beautiful Website</h1>
                <hr />
            </div>
        );
    }
}
export default Header;
</script>
<script type="text/babel" data-plugins="transform-es2015-modules-umd">

// import Header from "./Header";
const Header = window.InlineBabelScript.default

class App extends React.Component 
{
    render()
    {
        return (
            <div>
                <Header/>
                <section>
                    <h2>I am trying to make this React thing work</h2>
                    <p>
                        It should be easy to do I am trying to do but may be I am a little confused about 
                        things in React JS. Sooner or later though everything gets easier and most importantly
                        crystal clear to the human mind when you persevere. I believe.
                    </p>
                </section>
            </div>

        );
    }
}

ReactDOM.render(<App />, document.getElementById('root'));
</script>

推荐阅读