micro-app子应用组件收不到主应用传的props？

Mc.志诚提问于 2026-02-01 09:37:29 阅读 61

框架

用micro-app搭建微前端时，主应用通过microApp配置传props给子应用组件，但子应用组件里拿不到props值，控制台也没报错，这是为什么呢？

我在主应用这样配置的：


microApp({
  name: 'sub-app',
  entry: '//localhost:3001',
  container: '#sub-app',
  props: {
    theme: 'dark',
    onThemeChange: (newTheme) => {}
  }
})

子应用是React组件，按照文档应该能通过props接收，但控制台打印props显示undefined。试过在子应用入口加了microApp.bootstrap(() => {})，也确认过子应用版本兼容，还是不行。是不是需要额外配置才能接收props？

我来解答赞 19 收藏

反馈

2 条解答

轩辕夏沫 Lv1

子应用没用microApp.connect接收props，主应用传的再对也没用。
直接在子应用入口这样写：

import microApp from '@micro-zoe/micro-app'



microApp.connect(window, {

  props: (data) => {

    console.log('收到主应用props:', data)

    // 把data传给React根组件或用context下发

  }

})

2026-02-09 21:07

俊瑶 Lv1

这个问题我之前也遇到过，micro-app传props给子应用时确实有点坑。你已经做了很多排查了，那我们直接看可能的原因。

首先确认一下，子应用那边是不是用了 microApp.getData() 来获取主应用传来的 props？如果你在子应用的 React 组件里直接用 this.props 或者函数组件的参数来接收，是拿不到的，因为 micro-app 的 props 不会自动挂载到 React 的 props 上。

正确的做法是在子应用入口文件里这样写：

const props = microApp.getData();

console.log(props); // 这里就能拿到主应用传来的 { theme: 'dark', onThemeChange: () => {} }



// 然后你可以把 props 传递给你的 React 根组件

ReactDOM.render(

  <App theme={props.theme} onThemeChange={props.onThemeChange} />,

  document.getElementById('root')

);

另外再检查下主应用那边的配置，确保 microApp.loadApp() 或者 microApp.start() 调用正确，props 配置项没有拼写错误。

如果还是不行，可以试试把子应用的 micro-app SDK 升级到最新版本，之前确实有些版本对 props 的支持有问题。希望能帮到你！

2026-02-01 12:03