Vue.js：如何通过Store传递带Props的组件变量？

嘿，我之前也碰到过一模一样的问题！通过 Store 传递带 Props 的组件，核心思路其实是别直接存组件本身，而是存一个能返回组件的函数——这样你就能在渲染的时候灵活传入需要的 Props 了。下面分几种常见场景给你举例子：

如果你是用自己写的 Context 来管理组件状态，之前可能是直接把组件存在状态里：

// ❌ 错误做法：直接存组件，无法动态传Props
const [CurrentComponent, setCurrentComponent] = useState(MyButton);

// 渲染时只能这么写，没法加Props
return <CurrentComponent />;

改成存一个「接收Props并返回组件」的函数就解决了：

// ✅ 正确做法：存渲染函数
const [componentRenderer, setComponentRenderer] = useState((props) => <MyButton {...props} />);

// 渲染时传入需要的Props
return (
  <div>
    {componentRenderer({ 
      label: "点击我", 
      onClick: () => console.log("触发事件") 
    })}
  </div>
);

如果需要切换组件，就更新这个渲染函数就行：

// 切换成带预绑定Props的另一个组件
setComponentRenderer((props) => (
  <MyCard 
    title="固定标题" 
    {...props} // 保留动态传入的Props
  />
));

如果用 Redux 管理 Store，逻辑是一样的：把渲染函数存在 Store 里，组件中取出后调用并传Props。

定义 Action 和 Reducer #

// Action Creator
export const setComponentRenderer = (renderer) => ({
  type: "COMPONENT/SET_RENDERER",
  payload: renderer
});

// Reducer
const initialState = {
  renderer: (props) => <DefaultComponent {...props} />
};

export const componentReducer = (state = initialState, action) => {
  switch (action.type) {
    case "COMPONENT/SET_RENDERER":
      return { ...state, renderer: action.payload };
    default:
      return state;
  }
};

在组件中使用 #

import { useSelector, useDispatch } from "react-redux";
import { setComponentRenderer } from "./your-redux-slice";

const App = () => {
  const componentRenderer = useSelector(state => state.components.renderer);
  const dispatch = useDispatch();

  // 切换组件的按钮
  const switchToCustomComponent = () => {
    dispatch(setComponentRenderer((props) => (
      <CustomComponent 
        fixedProp="我是固定值" 
        {...props} 
      />
    )));
  };

  return (
    <div>
      <button onClick={switchToCustomComponent}>切换组件</button>
      {/* 传入动态Props */}
      {componentRenderer({ dynamicProp: "我是动态值" })}
    </div>
  );
};

• 别直接存 JSX 元素（比如 <MyComponent prop="xxx" />），一旦存进去，Props 就固定死了，没法动态更新。
• 如果用 TypeScript，记得给渲染函数加类型定义，比如：type ComponentRenderer = (props: MyComponentProps) => JSX.Element;，避免类型错误。
• 确保渲染函数是纯函数，不然可能会导致不必要的重渲染。

内容的提问来源于stack exchange，提问作者A. L