当前位置：首页 > React

react框架如何赋值

2026-03-31 08:50:27React

React 框架中的赋值方法

在 React 中，赋值操作通常涉及状态管理、属性传递或直接操作 DOM。以下是常见的赋值方法：

状态赋值（使用 useState Hook）
通过 useState Hook 定义状态变量及其更新函数，调用更新函数可以重新赋值状态：

import { useState } from 'react';

function Example() {
  const [count, setCount] = useState(0); // 初始值为 0

  // 赋值操作
  const increment = () => {
    setCount(count + 1); // 直接赋新值
  };

  return <button onClick={increment}>{count}</button>;
}

类组件中的状态赋值
类组件中通过 this.setState 方法更新状态：

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

  increment = () => {
    this.setState({ count: this.state.count + 1 }); // 赋新值
  };

  render() {
    return <button onClick={this.increment}>{this.state.count}</button>;
  }
}

属性（Props）传递
父组件通过属性向子组件传递数据，子组件通过 props 接收：

function Parent() {
  const message = "Hello React";
  return <Child text={message} />; // 赋值给子组件的 props
}

function Child(props) {
  return <div>{props.text}</div>; // 接收赋值
}

直接操作 DOM（不推荐）
在极少数需要直接操作 DOM 的场景下，可以通过 ref 赋值：

import { useRef } from 'react';

function Example() {
  const inputRef = useRef(null);

  const focusInput = () => {
    inputRef.current.value = "New Value"; // 直接赋值
    inputRef.current.focus();
  };

  return (
    <>
      <input ref={inputRef} />
      <button onClick={focusInput}>Set Value</button>
    </>
  );
}

注意事项

react框架如何赋值