当前位置：首页 > React

react中如何使用原生js

2026-03-11 13:49:07React

在 React 中使用原生 JavaScript

React 是一个基于 JavaScript 的库，因此可以直接在 React 组件中使用原生 JavaScript 代码。以下是几种常见的使用方式：

直接在组件中编写原生 JavaScript

可以在 React 组件的生命周期方法、事件处理函数或任何函数中直接使用原生 JavaScript 代码。

import React from 'react';

function ExampleComponent() {
  const handleClick = () => {
    // 原生 JavaScript 代码
    const element = document.getElementById('myElement');
    element.style.backgroundColor = 'red';
  };

  return (
    <div>
      <button onClick={handleClick}>Change Color</button>
      <div id="myElement">This is a div</div>
    </div>
  );
}

export default ExampleComponent;

使用 `useEffect` 钩子执行原生 JavaScript

useEffect 钩子可以用来在组件渲染后执行原生 JavaScript 代码，例如操作 DOM 或添加事件监听器。

import React, { useEffect } from 'react';

function ExampleComponent() {
  useEffect(() => {
    // 原生 JavaScript 代码
    const element = document.getElementById('myElement');
    element.addEventListener('click', () => {
      alert('Element clicked!');
    });

    // 清理函数
    return () => {
      element.removeEventListener('click', () => {
        alert('Element clicked!');
      });
    };
  }, []);

  return (
    <div id="myElement">Click me</div>
  );
}

export default ExampleComponent;

在 React 中使用原生 JavaScript 库

可以直接在 React 中引入和使用原生 JavaScript 库，例如 jQuery 或其他第三方库。

import React, { useEffect } from 'react';
import $ from 'jquery';

function ExampleComponent() {
  useEffect(() => {
    // 使用 jQuery
    $('#myElement').css('color', 'blue');
  }, []);

  return (
    <div id="myElement">This text is blue</div>
  );
}

export default ExampleComponent;

动态生成脚本或样式

可以通过 useEffect 动态添加原生 JavaScript 脚本或样式。

react中如何使用原生js

import React, { useEffect } from 'react';

function ExampleComponent() {
  useEffect(() => {
    // 动态添加脚本
    const script = document.createElement('script');
    script.src = 'https://example.com/script.js';
    script.async = true;
    document.body.appendChild(script);

    // 动态添加样式
    const link = document.createElement('link');
    link.rel = 'stylesheet';
    link.href = 'https://example.com/style.css';
    document.head.appendChild(link);

    // 清理函数
    return () => {
      document.body.removeChild(script);
      document.head.removeChild(link);
    };
  }, []);

  return (
    <div>Dynamic script and style added</div>
  );
}

export default ExampleComponent;