在 React 中，新增內聯腳本可能是一項簡單的任務。要實現此目的，請考慮以下選項：
使用動態程式碼注入進行條件渲染：
import { Component } from 'react';
export default class extends Component {
render() {
if (process.env.NODE_ENV === 'production') {
return (
<script src="https://use.typekit.net/foobar.js" />
);
}
return null;
}
}動態建立DOM 元素：
class Component extends React.Component {
componentDidMount() {
const script = document.createElement('script');
script.src = 'https://use.typekit.net/foobar.js';
script.async = true;
document.body.appendChild(script);
}
render() {
// ... Your component logic
}
}使用鉤子（useEffect帶清理）：
import { useEffect, useRef } from 'react';
const useScript = (url) => {
const ref = useRef(null);
useEffect(() => {
if (!ref.current) {
const script = document.createElement('script');
script.src = url;
script.async = true;
ref.current = script;
document.body.appendChild(script);
return () => {
document.body.removeChild(script);
};
}
}, [url]);
};使用Hooks（useEffect 不含清理）：
import { useEffect } from 'react';
const useScript = (url) => {
useEffect(() => {
const script = document.createElement('script');
script.src = url;
script.async = true;
document.body.appendChild(script);
}, [url]);
};注意：如果您
注意：如果您注意：如果您想要在渲染期間動態取得和執行腳本，通常建議使用第一種方法，而其他方法適合在將元件掛載到DOM中時載入一次腳本。以上是如何為 React 元件新增腳本標籤？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
