当前位置：首页 > React

react写的项目如何用js

2026-01-25 22:03:08React

在 React 项目中直接使用 JavaScript 是完全可行的，因为 React 本身就是基于 JavaScript 的库。以下是几种常见场景下的实现方法：

直接编写 JavaScript 逻辑

在 React 组件中可以直接嵌入 JavaScript 代码，例如在函数组件中声明变量、使用条件语句或循环：

function MyComponent() {
  const name = "JavaScript";
  const isActive = true;

  if (isActive) {
    return <div>{name} is active</div>;
  }
  return <div>{name} is inactive</div>;
}

使用纯 JavaScript 函数

可以创建独立的 JavaScript 函数并在 React 组件中调用：

// utils.js
export function calculateSum(a, b) {
  return a + b;
}

// MyComponent.js
import { calculateSum } from './utils';

function MyComponent() {
  const result = calculateSum(5, 3);
  return <div>Result: {result}</div>;
}

处理事件

使用 JavaScript 原生事件处理方式：

function MyComponent() {
  function handleClick() {
    alert('Button clicked!');
  }

  return <button onClick={handleClick}>Click me</button>;
}

操作 DOM

虽然 React 推荐使用 ref 而不是直接操作 DOM，但必要时仍可使用原生 JavaScript：

function MyComponent() {
  const inputRef = React.useRef();

  function focusInput() {
    inputRef.current.focus();
  }

  return (
    <div>
      <input ref={inputRef} />
      <button onClick={focusInput}>Focus Input</button>
    </div>
  );
}

使用第三方 JavaScript 库

在 React 中集成传统 JavaScript 库：

import $ from 'jquery';

function MyComponent() {
  React.useEffect(() => {
    $('#myElement').hide();
  }, []);

  return <div id="myElement">This will be hidden</div>;
}

类组件中的 JavaScript

在类组件中使用 JavaScript 方法与状态：

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  incrementCount() {
    this.setState({ count: this.state.count + 1 });
  }

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={() => this.incrementCount()}>Increment</button>
      </div>
    );
  }
}