正斜杠导致 Javascript/JSX 中的错误答案

【问题标题】：Forward slash causing errors in Javascript/JSX正斜杠导致 Javascript/JSX 中的错误
【发布时间】：2017-12-27 00:22:29
【问题描述】：

我是 Javascript 和 JSX 的新手，遇到了关于正斜杠键的问题。 JSX 使用正斜杠来关闭标签，例如：<div className="container">Hello World!</div>

我的问题是，每当我输入一个正斜杠/ 时，我的文本编辑器都会将该行的其余部分读取为字符串值。（或者至少将其颜色编码为与字符串相同的颜色）。

该问题已出现在 Sublime Text 3 和括号中。我检查了每个版本的构建版本，它们都很稳定。

我用一个简单的盒子生成器重现了这个问题。这是 html，下面是相关 Javascript 文件的链接。

<!DOCTYPE html>
<html>
<head>
    <!-- React refs -->
    <script src="https://unpkg.com/react@0.14.3/dist/react.js"></script>
    <script src="https://unpkg.com/react-dom@0.14.3/dist/react-dom.js"></script>

    <!-- Babel/JSXTransformer ref -->
    <script src="https://unpkg.com/babel-core@5.8.38/browser.min.js"></script>

    <style>
        .box {
            padding: 6px;
            width: 400px;
            height: 100px;
            border: 2px solid coral;
            background-color: yellow;
        }
        .container {
            margin: 4px;
        }
    </style>
</head>

<body>
    <div class="container" id="component1"></div>
    <div class="container" id="component2"></div>

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

问题出在最后两行： forwardSlash.js

这两个文件在顶部生成一个绿色框。然后在其下方随机生成一个红色或蓝色框...除了/ 阻止该行的其余部分正常执行...因此没有显示蓝色或红色框。

任何帮助将不胜感激！我搜索了互联网并与其他开发人员交谈过，但似乎没有人能提供帮助。

【问题讨论】：

请在问题中包含相关代码，而不是作为外部链接。

标签： javascript html reactjs react-native jsx

【解决方案1】：

语法应该是：

ReactDOM.render((
    <GreenBox />
), document.getElementById('component1'));

注意.render 的第一个参数是元素的包装，当直接输入时。或者，您可以这样做：

const greenBoxDOM = (
    <div>
      <Box color="green"></Box>
    </div>
);

ReactDOM.render(
    greenBoxDOM,
    document.getElementById('component1')
);

【讨论】：

【解决方案2】：

我的问题是，每当我输入一个正斜杠 / 时，我的文本编辑器将该行的其余部分读取为字符串值。（或者至少对其进行颜色编码与字符串颜色相同）。

这是因为您是在 JSX 中编写代码，但语法高亮是针对纯 JavaScript 进行的。对于 Sublime Text，你必须为它安装一个名为 Babel 的包。 https://packagecontrol.io/packages/Babel 他们提到了如何在安装后启用它。

括号也必须有一些类似的包。

【讨论】：

谢谢，您的链接帮助解决了 sublime 文本突出显示问题。明天我会知道 Brackets 是否有任何 jsx 支持