1

我想使用从Single SPA ( customProps )传递的道具启动我的 React微应用。我想出的唯一方法是：

import React from 'react';
import ReactDOM from 'react-dom';
import singleSpaReact from 'single-spa-react';
import App from './where/my/root/is.js';

function domElementGetter() {
    return document.getElementById("mounting-node")
}

let EnhancedRootComponent = App; /* 1 */

const reactLifecycles = singleSpaReact({
    React,
    ReactDOM,
    rootComponent: EnhancedRootComponent, /* 1 */
    domElementGetter,
})

export const bootstrap = [
    (args) => {
        /* 2 */ EnhancedRootComponent = () => <App myArgs={args.thePropsIWannaPass} />;
        return Promise.resolve();
    },
    reactLifecycles.bootstrap,
];

export const mount = [reactLifecycles.mount];
export const unmount = [reactLifecycles.unmount];

这确实有效（我可以在我的组件中看到并使用传递的道具），但我对根组件在调用singleSpaReact(1) 和调用bootstrap(2) 之间发生变化这一事实并不完全满意。会不会有我现在没有看到的副作用？有谁知道更好的方法？

4

1 回答 1

4

您在 props 变量中拥有此值，而无需重新分配。看看这个：
Root-config.js，负责将 prop 传递给微前端的文件

import { registerApplication, start } from 'single-spa';
import * as isActive from './activity-functions';

registerApplication('@company/micro2', () => System.import('@company/micro2'), isActive.micro2);

registerApplication('@company/micro1', () => System.import('@company/micro1'), isActive.micro1, { "authToken": "test" });

start();

micro1 Root.tsx

import React from 'react';

export default class Root extends React.Component {
  constructor(props: any){
    super(props)
  }

  state = {
    hasError: false,
  };

  componentDidCatch() {
    this.setState({ hasError: true });
  }

  render() {
    console.log(this.props)
    return (
      <div>test</div>
    );
  }
}

console.log 输出：

props:
   authToken: "test" <---- props which you pass
   name: "@company/micro1"
   mountParcel: ƒ ()
   singleSpa: {…}
   __proto__: Object

更高级的使用

const lifecycles = singleSpaReact({
  React,
  ReactDOM,
  loadRootComponent: (props) => 
      new Promise((resolve, reject) => resolve(() =>
      <Root {...props} test2={'test2'}/>)),
  domElementGetter,
});
于 2020-03-10T22:02:03.687 回答