コールのJavascript機能私はここに、この特定の問題を発見していないHTMLファイル

Question

からリアクトそれは次のとおりです。

は、私はHTMLファイルを持っていると言います。このHTMLファイルには、body-elementにいくつかのReact-classesと関数があります。 1つの機能は、フォームをレンダリングする機能です。たとえば、次のようになります。

renderForm: function() { 
     return (
     <div className="form_div"> 
     Movie search: <input type="text" className="query"></input> 
     <button onClick={this.search} className="submit">Search</button> 
     </div> 
    ); 
    }, 

Now。私も.jsファイルを持っています。このファイルでは、ユーザ入力を処理し、データベース/ API /私が検索したいものに渡すための仕上げ関数 "Search"を持っています。これはかなり大きな機能です。

この.jsファイルの検索機能を、自分のHTMLファイルにあるReact-codeで呼び出すことはできますか？

目標は、Reactでのレンダリングを処理することです.JSで機能します。

これは可能ですか（それは良い方法かどうか尋ねていません）。

Answer 1

はい、ちょうどあなたのリアクトコンポーネントにその関数を添付してください（あなたがthis経由でアクセスすることができます）か、グローバル（または多分から輸入し、それを維持する場合（this.searchの代わりにsearchを）直接関数を使用しますmodule）。

私は外部関数としてそれを使用することは簡単です言う：

renderForm: function() { 
    return (
    <div className="form_div"> 
     Movie search: <input type="text" className="query"></input> 
     <button onClick={search} className="submit">Search</button> 
    </div>   /* ^------ search comes from a script that's loaded before this code so we can just call it */ 
); 
} 

それがするのでsearch内のロジックはあなたが作成しているコンポーネントに、より一般的または無関係である場合、それはまた、より良いアプローチとなりますlooser couplingをご提供ください。

---

検索は、特定のコンポーネント（結合thisを必要とします）に依存している場合、あなたはあなたのリアクトコンポーネントに添付する必要があります。実際の構文は、ES6 classesまたはReact.createClassを使用しているかどうかによって異なります。クラスを使用して

一つのアプローチは、適切なコンテキストでそれを呼び出すグローバル検索の周りにラッパー・メソッドを作成することです：

class MyComponent extends React.Component { 
    constructor() { 
    // ... 
    } 

    search(...args) { 
    search.apply(this, ...args); // <--- Call the global search but bind `this` to the React component instance. 
    } 

    // now you can use this.search in renderForm 
    renderForm() { ... } 
} 

ます。また、ご使用のコンポーネントのprototypeに直接searchを添付しませんでしたラッパー関数は：

class MyComponent extends React.Component { 
    // ... 

    // you can use this.search in renderForm because it will be found on the prototype 
    renderForm() { ... } 
} 

MyComponent.prototype.search = search; // <-- attach global search to the prototype of your component 

限りReact.createClassを使用して、あなたはちょうどあなたが渡すオブジェクトへのグローバルsearchへの参照を添付することができカーレされているすべての機能を。 dを自動的にそのオブジェクトに設定します

var MyComponent = React.createClass({ 

    search: search, // <-- attach global search to your component, 

    // now you can use this.search in renderForm because it is a method of your component 
    renderForm() { ... } 
}); 

Answer 2

もちろん可能です。これは非常に一般的で、機能を分離するための良い習慣です。 には、あなたのhtmlファイルにあるあなたのjsファイルが含まれていることを確認してください。