时间戳

首页 > 解决方案 > 如何将html脚本标签转换为反应代码？

javascript - 如何将html脚本标签转换为反应代码？

问题描述

我是 javascript 的新生并做出反应。我的问题是：如何将以下代码转换为反应代码？

<div id="SOHUCS" sid="xxx"></div>
<script charset="utf-8" type="text/javascript" src="https://cy-cdn.kuaizhan.com/upload/changyan.js" ></script>
<script type="text/javascript">
window.changyan.api.config({
appid: 'xxx',
conf: 'xxxxx'
});
</script>

标签： javascriptreactjs

解决方案

使用componentDidMount()

import React, {Component} from "react";
import ReactDOM from "react-dom";

import "./styles.css";

class App extends Component {
    componentDidMount() {
        const script = document.createElement("script");
        script.async = true;
        script.src = "https://some-scripturl.js";
        this.div.appendChild(script);
    }
    render() {
        return ( <
            div className = "App"
            ref = {
                el => (this.div = el)
            } > < h1 > Hello react < /h1> {
                /* Script is inserted here */ } <
            /div>
        );
    }
}

export default App;

使用react-helmet

Reacthelmet 是一个管理浏览器头部管理器的 npm 库，可以很容易地更改头部标签内的网页代码行。首先，使用 npm install 命令安装 react-helmet

npm install react-helmet

它将依赖项添加到 package.json

"dependencies": {
        "react-helmet": "^6.1.0",
}

使用完整的组件代码向组件添加脚本标签react-helmet.

import React, { Component } from 'react';
import { Helmet } from 'react-helmet';

class AddingScriptExample extends Component {


    render() {
        return (
            <div className="application">
                <Helmet>
                    <script src="https://use.typekit.net/hello.js" type="text/javascript" />
                </Helmet>
            ...
            </div>
        );
    }
}
export default AddingScriptExample;

推荐阅读