React中FormKit子组件如何向父组件传state或直接使用Redux？

方案一：通过回调函数将子组件items传递给父组件，父组件处理Redux dispatch #

适合需要在父组件统一管理提交逻辑的场景：

1. 修改父组件代码 #

添加状态存储子组件的items，并定义回调函数接收子组件的更新：

import { useState } from 'react';
import { useDispatch } from 'react-redux';
// 导入你的Redux action（根据实际路径调整）
import { saveFrameworkList } from '../redux/actions';

function ParentComponent() {
  const dispatch = useDispatch();
  // 存储子组件传递过来的items数组
  const [frameworkItems, setFrameworkItems] = useState([]);

  // 提交时触发Redux dispatch
  const handleSubmit = () => {
    dispatch(saveFrameworkList(frameworkItems));
  };

  // 接收子组件items更新的回调函数
  const onItemsUpdate = (newItems) => {
    setFrameworkItems(newItems);
  };

  return (
    <MainContainerWrapper>
      {/* 根据UI需求添加提交按钮 */}
      <button onClick={handleSubmit}>提交框架列表</button>
      <AccordionContainer>
        {/* 将回调函数通过props传给子组件 */}
        <FrameworkList ref={parent} onItemsUpdate={onItemsUpdate} />
      </AccordionContainer>
    </MainContainerWrapper>
  );
}

2. 修改子组件代码 #

使用useEffect监听items变化，调用父组件传递的回调函数：

import { forwardRef, useEffect } from 'react';

export default forwardRef(function FrameworkList(props, ref) {
  const [items, item, addItem, input, sortUp, sortDown, sortList, remove] =
    UseListFunctions([
      { id: 0, name: 'Transparency' },
      { id: 1, name: 'Collaboration' },
      { id: 2, name: 'Flexible working arrangements' },
    ]);

  // 监听items变化，实时传递给父组件
  useEffect(() => {
    if (props.onItemsUpdate) {
      props.onItemsUpdate(items);
    }
  }, [items, props.onItemsUpdate]);

  // 原有的返回JSX部分保持不变
  return (
    <StageComponent data-has-animation={ref ? true : null}>
      <div className="logo">
        {(!ref && (
          <img
            src="https://cdn.formk.it/web-assets/logo-auto-animate.svg"
            width="300"
            height="37"
          />
        )) || ''}
      </div>
      <ULComponent ref={ref}>
        {items.map((item) => (
          <ListComponent key={item.id}>
            <Typography variant="subtitle1" color="black">
              {item.name}
            </Typography>
            <div className="action-icons">
              <button onClick={() => sortUp(item)}>
                <Arrow direction="up" />
              </button>
              <button onClick={() => sortDown(item)}>
                <Arrow direction="down" />
              </button>
              <button className="remove" onClick={() => remove(item)}>
                <Close />
              </button>
            </div>
          </ListComponent>
        ))}
        {/* 原有的ListComponent剩余部分 */}
      </ULComponent>
    </StageComponent>
  );
});

方案二：子组件直接执行Redux dispatch #

适合希望在子组件内直接处理状态同步的场景：

情况1：子组件在Redux Provider范围内 #

直接使用useDispatch钩子：

import { forwardRef, useEffect } from 'react';
import { useDispatch } from 'react-redux';
// 导入你的Redux action
import { saveFrameworkList } from '../redux/actions';

export default forwardRef(function FrameworkList(props, ref) {
  const dispatch = useDispatch();
  const [items, item, addItem, input, sortUp, sortDown, sortList, remove] =
    UseListFunctions([
      { id: 0, name: 'Transparency' },
      { id: 1, name: 'Collaboration' },
      { id: 2, name: 'Flexible working arrangements' },
    ]);

  // 可选：实时同步到Redux（或在提交按钮点击时触发）
  useEffect(() => {
    dispatch(saveFrameworkList(items));
  }, [items, dispatch]);

  // 添加提交按钮，点击时触发dispatch
  const handleSubmit = () => {
    dispatch(saveFrameworkList(items));
  };

  return (
    <StageComponent data-has-animation={ref ? true : null}>
      {/* ...原有的JSX内容 */}
      <button onClick={handleSubmit}>提交框架列表</button>
    </StageComponent>
  );
});

情况2：子组件不在Redux Provider范围内 #

使用connect高阶组件包裹子组件，注入dispatch：

import { forwardRef } from 'react';
import { connect } from 'react-redux';
import { saveFrameworkList } from '../redux/actions';

const FrameworkListComponent = forwardRef(function(props, ref) {
  const [items, item, addItem, input, sortUp, sortDown, sortList, remove] =
    UseListFunctions([
      { id: 0, name: 'Transparency' },
      { id: 1, name: 'Collaboration' },
      { id: 2, name: 'Flexible working arrangements' },
    ]);

  const handleSubmit = () => {
    props.dispatch(saveFrameworkList(items));
  };

  return (
    <StageComponent data-has-animation={ref ? true : null}>
      {/* ...原有的JSX内容 */}
      <button onClick={handleSubmit}>提交</button>
    </StageComponent>
  );
});

// 使用connect包裹组件，注入dispatch
export default connect()(FrameworkListComponent);

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