Javascript/JSXでスラッシュが発生する

JavascriptとJSXを初めて使用し、スラッシュキーに関する問題が発生しました。 <div className="container">Hello World!</div>Javascript/JSXでスラッシュが発生する

私の問題は、私は、単一の前方には、/をスラッシュ入力するたびに、私のテキストエディタは、文字列値としてラインの残りの部分を読んで、次のとおりです。 JSXはたとえば、タグを閉じるためにスラッシュを使用しています。（または少なくとも文字列と同じ色を色分けします）。

この問題は、Sublime Text 3 and Bracketsに掲載されています。私はそれぞれのビルドバージョンをチェックしており、どちらも安定しています。

単純なボックスジェネレータで問題を再現しました。これはhtmlであり、その下には問題のJavascriptファイルへのリンクがあります。

<!DOCTYPE html> 
<html> 
<head> 
    <!-- React refs --> 
    <script src="https://unpkg.com/[email protected]/dist/react.js"></script> 
    <script src="https://unpkg.com/[email protected]/dist/react-dom.js"></script> 

    <!-- Babel/JSXTransformer ref --> 
    <script src="https://unpkg.com/[email protected]/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>

そして、ここでの問題は、最後の2行には、どこにあるかである。これらの2つのファイルが一番上に緑色のボックスを生成 forwardSlash.js

。 /が残りの行が正しく実行されないことを除いて、赤または青のボックスを無作為に生成します。青または赤のボックスは表示されません。

ご協力いただければ幸いです！私は、interwebsを精査し、他の開発者に話しましたが、誰も助けているように見えることはありません。

出典

2017-07-21 6Nguyen

外部リンクではなく、該当するコードを質問に含めてください。 –

構文は次のようになります

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

注.renderの最初の引数は、直接入力要素、ラッパーです。

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

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

出典

2017-07-21 05:50:28 GAEfan

-1

私の問題は、私は、単一のスラッシュ/を入力するたびに、私のテキストエディタは、文字列値としてラインの残りの部分を読んで、次のとおりです。それとも、あなたはこれを行うことができます。（または少なくとも文字列と同じ色のを色分けしてください）。

これは、JSXでコードを記述しているが、純粋なJavaScriptに対して構文の強調表示が行われているためです。崇高なテキストの場合、Babelという名前のパッケージをインストールする必要があります。 https://packagecontrol.io/packages/Babel インストール後に有効にする方法について説明しました。

ブラケットにも同様のパッケージが必要です。

出典

2017-07-21 06:00:12 sidomatic11

ありがとうございました。あなたのリンクは、崇高なテキストハイライトの問題を解決するのを助けました。 Bracketsにjsxサポートがあるかどうかは明日にわかります – 6Nguyen

Javascript/JSXでスラッシュが発生する

答えて

関連する問題