0

私はこれを何年も機能させようとしてきましたが、何をしても、ディレクティブは反応コンポーネントを見つけることができません。

これらは私が含めているファイルです：

<script src="bower_components/react/JSXTransformer.js"></script>
<script src="bower_components/react/react-with-addons.js"></script>
<script src="bower_components/ngReact/ngReact.min.js"></script>
<script src="node_modules/babel-core/browser.js"></script>
<script src="static/react-components.min.js" type="text/babel"></script>
<script src="static/main.min.js"></script>

私のコンポーネントがreact-components.min.jsファイル内にあり、すべてのAngularコードがmain.min.js.

このディレクティブを機能させるには、ブラウザー内のトランスフォーマーを使用する必要があるかもしれないと述べられているので、babel を使用して試しましたが、それも機能しません。

これは私の反応コンポーネントです:

<react-component name="Chat" watch-depth="reference"></react-component>

そして、react-components.min.js ファイルで、「Chat」というコンポーネントを取得しました。

var Chat = React.createClass({
   render: function() {
    return <footer className="chat chat--dark">Hello John</footer>;
  }
});

core.value('Chat', Chat); // My application is bound to the core module

しかし、それは見つかりません..他の誰もこの問題を抱えていないように見えるので、何が間違っているのでしょうか?

4

1 に答える 1

1

JSX コンパイルの問題

コンパイルエラーだと思います。オンライン コンパイラ ( https://babeljs.io/repl/ ) を介してコードを実行しました。現在のコンポーネント コードを以下のブロックと交換し、動作するかどうかを確認します。

"use strict";

var Chat = React.createClass({
  displayName: "Chat",

  render: function render() {
    return React.createElement(
      "footer",
      { className: "chat chat--dark" },
      "Hello John"
    );
  }
});

core.value('Chat', Chat); // My application is bound to the core module

JSXTransformer は非推奨です。Babel を使用するビルド ステップに追加する必要があります。 https://facebook.github.io/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html

JSX および ES6 サポートの追加に関する内訳については、私のブログ投稿を確認してください。 http://blog.tylerbuchea.com/migrating-angular-project-to-react/

于 2016-04-09T20:51:35.253 に答える