Vue2自定义model组件迁移至React Hooks的实现方式问询

在React里没有Vue那种model选项的概念，但可以用受控组件模式实现完全等价的双向绑定逻辑，核心思路和Vue一致：父组件维护状态，通过props把值和更新方法传递给子组件，子组件触发更新时通知父组件修改状态。

对应关系梳理 #

• Vue子组件的model.prop: 'checked' → React子组件接收checked prop（用于接收父组件传递的值）
• Vue子组件的model.event: 'change' → React子组件接收onChange回调prop（用于通知父组件更新值）

子组件实现（React Hooks） #

// ChildComponent.jsx
export default function ChildComponent({ checked, onChange }) {
  // 模拟子组件内部触发值变更的逻辑（比如用户选择文件、点击复选框等操作）
  const handleUserAction = (newCheckedValue) => {
    // 调用父组件传入的onChange回调，把新值传递回去
    onChange(newCheckedValue);
  };

  // 这里替换成你实际的子组件UI，比如文件选择器、复选框组等
  return (
    <div>
      <label>选择文件：</label>
      {/* 示例：模拟选择文件后更新值 */}
      <input
        type="file"
        multiple
        onChange={(e) => {
          // 把选中的文件名数组传给父组件
          const fileNames = Array.from(e.target.files).map(file => file.name);
          handleUserAction(fileNames);
        }}
      />
      <p>当前选中：{Array.isArray(checked) ? checked.join(', ') : checked}</p>
    </div>
  );
}

父组件使用方式 #

// ParentComponent.jsx
import { useState } from 'react';
import ChildComponent from './ChildComponent';

export default function ParentComponent() {
  // 维护选中文件的状态，对应Vue里的SelectedFiles
  const [selectedFiles, setSelectedFiles] = useState([]);

  return (
    <div>
      {/* 传递状态给子组件的checked prop，同时绑定onChange回调更新状态 */}
      <ChildComponent
        checked={selectedFiles}
        onChange={(newValue) => setSelectedFiles(newValue)}
      />
    </div>
  );
}

额外说明 #

• 如果你的子组件需要临时维护内部状态（比如输入过程中的中间值），可以在子组件内使用useState，但最终要在合适的时机（比如用户确认选择）调用onChange把最终值传给父组件。
• React的这种模式和Vue的自定义v-model逻辑完全对齐，都是单向数据流：父传值给子，子通过回调通知父更新，避免了双向绑定的隐式数据流问题。

内容的提问来源于stack exchange，提问作者learningMonk