diff --git a/docs/pack/react.md b/docs/pack/react.md index 5df2a002..720d2ddf 100644 --- a/docs/pack/react.md +++ b/docs/pack/react.md @@ -59,35 +59,12 @@ const { bus, setupApp, preloadApp, destroyApp } = WujieReact; ## 原理 ```javascript -import React from "react"; +import React, { createElement } from "react"; import PropTypes from "prop-types"; -import { bus, setupApp ,preloadApp, startApp, destroyApp } from "wujie"; +import { bus, preloadApp, startApp, destroyApp, setupApp } from "wujie"; export default class WujieReact extends React.PureComponent { - static propTypes = { - height: PropTypes.string, - width: PropTypes.string, - name: PropTypes.string, - loading: PropTypes.element; - url: PropTypes.string, - alive: PropTypes.bool, - fetch: PropTypes.func, - props: PropTypes.object, - replace: PropTypes.func, - sync: PropTypes.bool, - prefix: PropTypes.object, - fiber: PropTypes.bool, - degrade: PropTypes.bool, - plugins: PropTypes.array, - beforeLoad: PropTypes.func, - beforeMount: PropTypes.func, - afterMount: PropTypes.func, - beforeUnmount: PropTypes.func, - afterUnmount: PropTypes.func, - activated: PropTypes.func, - deactivated: PropTypes.func, - loadError: PropTypes.func, - }; + static propTypes = propTypes; static bus = bus; static setupApp = setupApp; static preloadApp = preloadApp; @@ -101,69 +78,62 @@ export default class WujieReact extends React.PureComponent { startAppQueue = Promise.resolve(); + startApp = async () => { + try { + const props = this.props; + const { current: el } = this.state.myRef; + this.destroy = await startApp({ + ...props, + el, + }); + } catch (error) { + console.log(error); + } + }; + execStartApp = () => { - const { - name, - url, - loading, - alive, - fetch, - props, - replace, - sync, - prefix, - fiber, - degrade, - plugins, - beforeLoad, - beforeMount, - afterMount, - beforeUnmount, - afterUnmount, - activated, - deactivated, - loadError, - } = this.props; - this.startAppQueue = this.startAppQueue.then(async () => { - try { - this.destroy = await startApp({ - name, - url, - el: this.state.myRef.current, - loading, - alive, - fetch, - props, - replace, - sync, - prefix, - fiber, - degrade, - plugins, - beforeLoad, - beforeMount, - afterMount, - beforeUnmount, - afterUnmount, - activated, - deactivated, - loadError, - }); - } catch (error) { - console.log(error); - } - }); + this.startAppQueue = this.startAppQueue.then(this.startApp); }; render() { this.execStartApp(); - return React.createElement("div", { + + const { width, height } = this.props; + const { myRef: ref } = this.state; + return createElement("div", { style: { - width: this.props.width, - height: this.props.height, + width, + height, }, - ref: this.state.myRef, + ref, }); } } + +const propTypes = { + height: PropTypes.string, + width: PropTypes.string, + name: PropTypes.string, + loading: PropTypes.element, + url: PropTypes.string, + alive: PropTypes.bool, + fetch: PropTypes.func, + props: PropTypes.object, + attrs: PropTypes.object, + replace: PropTypes.func, + sync: PropTypes.bool, + prefix: PropTypes.object, + fiber: PropTypes.bool, + degrade: PropTypes.bool, + plugins: PropTypes.array, + beforeLoad: PropTypes.func, + beforeMount: PropTypes.func, + afterMount: PropTypes.func, + beforeUnmount: PropTypes.func, + afterUnmount: PropTypes.func, + activated: PropTypes.func, + deactivated: PropTypes.func, + loadError: PropTypes.func, +}; + ``` diff --git a/packages/wujie-react/index.js b/packages/wujie-react/index.js index d957dd2d..eb6ecb4a 100644 --- a/packages/wujie-react/index.js +++ b/packages/wujie-react/index.js @@ -1,4 +1,4 @@ -import React from "react"; +import React, { createElement } from "react"; import PropTypes from "prop-types"; import { bus, preloadApp, startApp, destroyApp, setupApp } from "wujie"; @@ -28,7 +28,7 @@ export default class WujieReact extends React.PureComponent { } catch (error) { console.log(error); } - } + }; execStartApp = () => { this.startAppQueue = this.startAppQueue.then(this.startApp); @@ -39,32 +39,38 @@ export default class WujieReact extends React.PureComponent { const { width, height } = this.props; const { myRef: ref } = this.state; - return
; + return createElement("div", { + style: { + width, + height, + }, + ref, + }); } } const propTypes = { - height: PropTypes.string, - width: PropTypes.string, - name: PropTypes.string, - loading: PropTypes.element, - url: PropTypes.string, - alive: PropTypes.bool, - fetch: PropTypes.func, - props: PropTypes.object, - attrs: PropTypes.object, - replace: PropTypes.func, - sync: PropTypes.bool, - prefix: PropTypes.object, - fiber: PropTypes.bool, - degrade: PropTypes.bool, - plugins: PropTypes.array, - beforeLoad: PropTypes.func, - beforeMount: PropTypes.func, - afterMount: PropTypes.func, - beforeUnmount: PropTypes.func, - afterUnmount: PropTypes.func, - activated: PropTypes.func, - deactivated: PropTypes.func, - loadError: PropTypes.func, - } \ No newline at end of file + height: PropTypes.string, + width: PropTypes.string, + name: PropTypes.string, + loading: PropTypes.element, + url: PropTypes.string, + alive: PropTypes.bool, + fetch: PropTypes.func, + props: PropTypes.object, + attrs: PropTypes.object, + replace: PropTypes.func, + sync: PropTypes.bool, + prefix: PropTypes.object, + fiber: PropTypes.bool, + degrade: PropTypes.bool, + plugins: PropTypes.array, + beforeLoad: PropTypes.func, + beforeMount: PropTypes.func, + afterMount: PropTypes.func, + beforeUnmount: PropTypes.func, + afterUnmount: PropTypes.func, + activated: PropTypes.func, + deactivated: PropTypes.func, + loadError: PropTypes.func, +};