当前位置：首页 > React

react 如何改变 props

2026-01-24 02:59:14React

修改 props 的方法

在 React 中，props 是不可变的（immutable），这意味着子组件不能直接修改从父组件传递过来的 props。如果需要基于 props 进行动态调整，可以通过以下方法实现：

使用 state 或 ref 存储 props 的副本

在子组件中，可以通过 useState 或 useRef 将 props 的值存储为内部状态或引用，之后对副本进行操作。

function ChildComponent({ initialValue }) {
  const [value, setValue] = useState(initialValue);

  const handleChange = () => {
    setValue(newValue); // 修改内部状态而非直接改 props
  };

  return <div>{value}</div>;
}

通过回调函数通知父组件

若需要将修改后的值传递回父组件，可以通过父组件传递的回调函数实现。父组件收到通知后自行更新数据源。

function ParentComponent() {
  const [data, setData] = useState("initial");

  const handleDataChange = (newData) => {
    setData(newData); // 父组件更新状态
  };

  return <ChildComponent data={data} onDataChange={handleDataChange} />;
}

function ChildComponent({ data, onDataChange }) {
  const handleClick = () => {
    onDataChange("updated"); // 调用父组件的回调
  };

  return <button onClick={handleClick}>Update</button>;
}

动态计算派生值

如果 props 的变化需要触发子组件的重新计算，可以使用 useMemo 派生新值，避免直接修改原始 props。

function ChildComponent({ items }) {
  const filteredItems = useMemo(() => {
    return items.filter(item => item.active); // 基于 props 生成新数组
  }, [items]);

  return <List items={filteredItems} />;
}

使用 Context 跨层级传递

对于深层嵌套组件，可通过 Context 提供动态值及更新方法，避免逐层传递回调。

react 如何改变 props

const DataContext = createContext();

function ParentComponent() {
  const [data, setData] = useState("initial");
  return (
    <DataContext.Provider value={{ data, setData }}>
      <ChildComponent />
    </DataContext.Provider>
  );
}

function ChildComponent() {
  const { data, setData } = useContext(DataContext);
  // 可直接通过 setData 更新
}