How to introduce external methods in react

How to introduce external methods in react: 1. Introduce external methods through import; 2. Introduce external methods through the life cycle in react, code such as "componentDidMount(){let scriptSrc = ['/config/jquery" .min.js', '/config/lib/codemirror.js']scriptSrc.map(res => {...}".

The operating environment of this tutorial: Windows 10 system, react version 18.0.0, Dell G3 computer.

How to introduce external methods in react?

Record the introduction of external functions js in react Question

When working on a react project, sometimes you need to reference other native js modules (that is, methods)

If the js is exported through the export default of es6, then in jsx can be introduced through import;

But if the js is just a method and has not been exported through es6, etc., it must be introduced through script;

For example, I wrote a native js or in a js Using jquery to operate the node return value means that a native event is triggered when a page element is clicked. It cannot be introduced through import in jsx.

There are two ways to introduce this js

1. If you introduce

in html in your react framework 2. You can also introduce

in jsx through the life cycle of react, for example

   componentDidMount() {
        // 要引入的js文件地址
        let scriptSrc = ['/config/jquery.min.js', '/config/lib/codemirror.js']
        scriptSrc.map(res => {
            // 动态创建script标签
            var script = document.createElement('script');
            // 规则
            script.type = "text/javascript"
            // script中src只想路径
            script.src = res;
            // 追加到html的head头中
            document.head.appendChild(script);
        })
        var script = document.createElement('script')
        script.type = 'text/javascript'
        script.src = '/config/show-hint.js'
        // 追加到html中body的内
        document.body.append(script)
        var script = document.createElement('script');
        script.type = "text/javascript"
        script.src = '/config/formula.js';
        // 追加到html中body的内
        document.body.append(script);
    }

If you need to introduce several js, you need to dynamically create several script tags, otherwise the latter will overwrite the former

If you add js to the head, it is because

You must wait until all js codes are downloaded After the parsing and execution are completed, the page content begins to be displayed.

There is a pitfall when introducing

If the script introduces js in the html, its js address is

http://http://localhost:端口号/你的js名称

, that is It means that the js address that the browser is looking for is the file in the public in your project, that is, the file under the static resource, so we need to put the js into the public (under the static resource directory) and import it directly / your path.

Recommended learning: "react video tutorial"

The above is the detailed content of How to introduce external methods in react. For more information, please follow other related articles on the PHP Chinese website!