当前位置：首页 > React

react实现联动

2026-01-26 13:27:28React

实现联动的核心方法

React中实现组件联动的核心在于状态提升（State Lifting）和回调函数传递。将共享状态提升到共同的父组件，通过props向下传递数据和回调函数。

父组件管理共享状态，子组件通过调用父组件传递的回调函数来更新状态。这种模式确保了数据流的单向性和可预测性。

使用Context API实现跨组件联动

对于深层嵌套的组件树，使用Context可以避免props逐层传递。创建Context对象后，通过Provider提供数据，Consumer或useContext钩子消费数据。

const FormContext = React.createContext();

function Parent() {
  const [formData, setFormData] = useState({});
  return (
    <FormContext.Provider value={{ formData, setFormData }}>
      <ChildA />
      <ChildB />
    </FormContext.Provider>
  );
}

function ChildA() {
  const { setFormData } = useContext(FormContext);
  // 更新逻辑...
}

表单联动示例

表单字段间的联动常见于选择省份后动态加载城市列表的场景。使用useEffect监听主字段变化，触发副字段更新。

function Form() {
  const [province, setProvince] = useState('');
  const [cities, setCities] = useState([]);

  useEffect(() => {
    if(province) {
      fetchCities(province).then(setCities);
    }
  }, [province]);

  return (
    <>
      <select value={province} onChange={e => setProvince(e.target.value)}>
        {/* 省份选项 */}
      </select>
      <select>
        {cities.map(city => <option key={city}>{city}</option>)}
      </select>
    </>
  );
}

使用Redux管理复杂联动状态

对于大型应用中的复杂联动逻辑，Redux提供可预测的状态管理。定义action和reducer处理状态变更，组件通过connect或useSelector/useDispatch与store交互。

// reducer.js
function formReducer(state, action) {
  switch(action.type) {
    case 'UPDATE_PROVINCE':
      return { ...state, province: action.payload, cities: [] };
    case 'UPDATE_CITIES':
      return { ...state, cities: action.payload };
    default:
      return state;
  }
}

// Component.js
function ProvinceSelect() {
  const dispatch = useDispatch();
  const handleChange = (e) => {
    dispatch({ type: 'UPDATE_PROVINCE', payload: e.target.value });
  };
  return <select onChange={handleChange}>...</select>;
}