React和Webpack 2中的模块化第三方小部件

Question

I am trying to develop a 3rd party widget that other websites would be able to use. I have already built a web app with react/webpack2 but it works as an actual website.

I am struggling to achieve it working as a widget. My goal would be to have different modules loaded in different pages by setting a param in the main widget element like so:

• Page 1: <my-widget module="module1" additional-param="param">
• Page 2: <my-widget module="module2" additional-param="param">

Any examples or best practices would be appreciated.

Answer 1

IMO, you can achieve this through

<My-widget children={ ({ param }) => (<Module1 { ...param } /> } />

using children as props will work just like <My-Widget><Module1 /><My-Widget>