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

I haven't found this specific question so here it is:

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

Say I have an HTML file. In this HTML file I have some React-classes and functions in the body-element. One function is for rendering a form. Like this for example:

说我有一个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>
    );
  },

Now. I also have a .js file. In this file I have a finished function "Search" to handle the user input and pass on to database/API/what I want to search through. It is a rather large function.

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

Can I call the Search function in this .js file with the React-code in my HTML-file?

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

The goal is to handle rendering with React, functionality with JS.

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

Is this possible (I'm not asking whether it's good practice or not)?

这是可能的(我不是在问这是不是好的做法)?

2 个解决方案

#1

Yes, just make sure to attach that function to your React component (so you can access it via this) or use the function directly (search instead of this.search) if you intend to keep it global (or perhaps imported from a module).

是的,只需确保将该函数附加到您的React组件(因此您可以通过它访问它)或直接使用该函数(搜索而不是this.search)如果您打算将其保持全局(或者可能从模块导入) 。

I would say using it as an external function is easier:

我会说使用它作为外部函数更容易:

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 */
  );
}

It will also be a better approach if the logic within search is more general or unrelated to the components you're creating because it will provide you with looser coupling.

如果搜索中的逻辑与您正在创建的组件更一般或无关,那么它也将是一种更好的方法,因为它将为您提供更松散的耦合。

If the search depends on specific components (needs this binding), you'll need to attach it to your React components. The actual syntax depends if you're using ES6 classes or React.createClass.

如果搜索依赖于特定组件(需要此绑定),则需要将其附加到React组件。实际语法取决于您使用的是ES6类还是React.createClass。

One approach using classes is to create a wrapper method around the global search that will call it with the proper context:

使用类的一种方法是围绕全局搜索创建一个包装器方法,该方法将使用适当的上下文调用它:

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() { ... }
}

You could also attach search directly to the prototype of your component and not make the wrapper function:

您还可以将搜索直接附加到组件的原型,而不是创建包装函数:

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

As far as using React.createClass, you can just attach the reference to the global search to the object you pass in. Any functions that are called as methods on an object automatically have this set to that object:

至于使用React.createClass,您只需将对全局搜索的引用附加到您传入的对象。任何在对象上作为方法调用的函数都会自动将此设置为该对象:

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() { ... }
});

2 个解决方案

#1

更多相关文章

随机推荐