当前位置：首页 > React

react数据如何设置

2026-03-31 04:49:07React

React 数据设置方法

React 中数据设置主要分为组件内部状态（State）和外部传入属性（Props）两种方式。

使用 State 管理组件内部数据

通过 useState Hook 或类组件的 this.state 设置组件内部状态数据。

react数据如何设置

// 函数组件示例
import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0); // 初始化状态

  return (
    <div>
      <p>当前计数: {count}</p>
      <button onClick={() => setCount(count + 1)}>增加</button>
    </div>
  );
}

使用 Props 接收父组件数据

父组件通过属性传递数据给子组件。

react数据如何设置

// 父组件
function ParentComponent() {
  const userData = { name: '张三', age: 25 };
  return <ChildComponent user={userData} />;
}

// 子组件
function ChildComponent(props) {
  return (
    <div>
      <p>姓名: {props.user.name}</p>
      <p>年龄: {props.user.age}</p>
    </div>
  );
}

使用 Context 跨组件共享数据

通过 React Context API 实现跨层级组件数据传递。

const UserContext = React.createContext();

function App() {
  return (
    <UserContext.Provider value={{ name: '李四', role: '管理员' }}>
      <UserProfile />
    </UserContext.Provider>
  );
}

function UserProfile() {
  const user = React.useContext(UserContext);
  return <p>用户角色: {user.role}</p>;
}

使用 Redux 管理全局状态

对于复杂应用，可使用 Redux 进行集中式状态管理。

// store.js
import { createStore } from 'redux';

const initialState = { counter: 0 };

function reducer(state = initialState, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { counter: state.counter + 1 };
    default:
      return state;
  }
}

const store = createStore(reducer);

// 组件中使用
import { useSelector, useDispatch } from 'react-redux';

function ReduxCounter() {
  const counter = useSelector(state => state.counter);
  const dispatch = useDispatch();

  return (
    <div>
      <p>计数: {counter}</p>
      <button onClick={() => dispatch({ type: 'INCREMENT' })}>增加</button>
    </div>
  );
}