如何将内联 babel 脚本转换为 JS答案

【问题标题】：How to convert inline babel script to JS如何将内联 babel 脚本转换为 JS
【发布时间】：2018-10-29 17:55:26
【问题描述】：

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

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

我已经在<script type="text/babel> ... </script>标签中写了内联babel脚本

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

编辑：添加了部分代码

<!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>

【问题讨论】：

您使用在线转换器是什么意思，因为您已将每个文件发布到其中并创建了一个 dist 文件夹？还是你只有一个文件
一个文件中的所有代码
看看会有所帮助
代码太大了，我这里加了一些代码
你还没有进口吗？

标签： javascript html reactjs inline babeljs

【解决方案1】：

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

进入问题，我看到你在id root的div标签之前写了脚本。转换脚本后，导入标签下方的脚本以查看更改

【讨论】：