Question

我还没有找到这个具体的问题，所以这里是：

说我有一个HTML文件。在这个HTML文件中，我在body-element中有一些React类和函数。一个功能是渲染表单。像这样举例如：

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

现在。我也有一个.js文件。在这个文件中，我有一个完成的功能“搜索”来处理用户输入并传递给数据库/ API /我要搜索的内容。这是一个相当大的功能。

我可以使用HTML文件中的React代码调用此.js文件中的搜索功能吗？

目标是使用React处理渲染，使用JS处理功能。

这可能吗（我不是在问这是不是好的做法）？

Answer 1

当然有可能。这是分离功能的非常常见和良好的做法。只需确保在您的html文件中包含您的js文件。

Answer 2

是的，只需确保将该功能附加到您的React组件（以便您可以通过this访问它）或直接使用该功能（search而不是this.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绑定），则需要将其附加到React组件。实际语法取决于您是否使用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() { ... }
}

您也可以将search直接附加到组件的prototype，而不是制作包装函数：

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的引用附加到您传入的对象。任何在对象上作为方法调用的函数都会自动{{1}设置为该对象：

this

使用HTML文件中的React调用.js文件中的Javascript函数

2 个答案: