Question

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

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

这个问题出现在Sublime Text 3和Brackets中。我已经检查了每个版本的版本，并且它们都是稳定的。

我用一个简单的盒子生成器重现了这个问题。这是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

这两个文件在顶部生成一个绿色框。然后在它下面随机生成一个红色或蓝色的框...除了/阻止线的其余部分正确执行...所以没有显示蓝色或红色框。

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

Answer 1

语法应为：

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

注意，.render的第一个arg是直接输入元素的包装器。或者，你可以这样做：

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

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

Answer 2

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

这是因为您正在使用JSX编写代码，但语法高亮显示正在为纯JavaScript完成。对于Sublime Text，您必须为其命名为Babel的软件包。 https://packagecontrol.io/packages/Babel 他们已经提到了如何在安装后启用它。

Brackets也必须有一些类似的包。

Javascript / JSX

2 个答案: