如何将嵌入式Babel脚本转换为JS

Question

我是React JS的新手，并直接将一些React JS代码编写为HTML ，并且运行良好。

现在，当我使用在线Babel Converter使用babel转换器将内联代码转换为JS并将Converted JS链接为HTML ，在空白UI上显示，在浏览器控制台窗口上没有错误或警告。

我已经在<script type="text/babel> ... </script>标记中编写了嵌入式babel脚本

注意：我使用Online Babel Converter中的默认选定选项转换了内联代码，在Settings Evaluate ， stage-2并在Presets react

编辑：添加了部分代码

<!DOCTYPE HTML>
<html>
    <body>
        <script type="text/babel>
            class App extends React.Component {
                createCircles = () => {
                let circles = [];

                for(let i = 1; i <= this.props.count; i++){
                    circles.push(<div className = "smallCircle" id={'circle'+i} key={i}><code className="circles" id={'id'+i}>{i}</code></div>);
                }

                return circles;
            }

                render(){
                    return (
                        <div id="circles">
                            <div className = "bigCircle" id="bigCircle">
                                <img id="bigCircleImage" src="http://localhost" />
                            </div>
                            <div className = "smallCircles">
                                {this.createCircles()}
                            </div>
                        </div>
                    );
                 }
            }

            function AppLoader(){
                return (
                    <App />
                );
            }

            ReactDOM.render(<AppLoader />, document.getElementById('root'));
        </script>
        <div id="root"></div>
    </body>
</html>

请帮忙...

Answer 1

同意@JoeWarner的答案，如果您不返回多个组件，则不要使用额外的AppLoader函数。

提到这个问题，我看到您在id root的div标签之前编写了脚本。 转换脚本后，将脚本导入标签下面以查看更改

如何将嵌入式Babel脚本转换为JS

问题描述

1 个解决方案

解决方案1
0 已采纳 2018-10-29 19:58:15

如何将嵌入式Babel脚本转换为JS

问题描述

1 个解决方案

解决方案1 0 已采纳 2018-10-29 19:58:15

解决方案1
0 已采纳 2018-10-29 19:58:15