Attach static methods of wrapped component to loadable component about loadable-components HOT 13 CLOSED

Loadable Components is not design to work with "statical" approach. I recommend you to use "react-navi" for this kind of approach.

from loadable-components.

Is this feature available on the latest version?

from loadable-components.

Yes!

from loadable-components.

Actually i can't get the statics methods of the component nor the component it self :(

Test.js

import React from 'react';

const Test = () => <h1>Test</h1>;
Test.staticMethod = () => console.log('test');

export default Test;

Main.js

import loadable from '@loadable/component';

const Test = loadable(() => import('./Test'));
console.log(Test);
console.log(Test.Component);
console.log(Test.staticMethod);

Prints

// { '$$typeof': Symbol(react.forward_ref), render: [Function], preload: [Function] }
// undefined
// undefined

from loadable-components.

Methods can't be added before the module is loaded. How could we know the methods? After the component being loaded, methods will be accessible.

from loadable-components.

Hum, so i need to resolve all loadable modules first before trying to access to static method?

from loadable-components.

Yes.

from loadable-components.

I get it now, thanks!

from loadable-components.

in ssr, how I can know that a loadable module has been loaded? loadableReady() must be called in browser only . @neoziro

Methods can't be added before the module is loaded. How could we know the methods? After the component being loaded, methods will be accessible.

from loadable-components.

The only way to know if a component is rendered is in the component itself. The easiest method is to pass a function called when the component is mount.

import loadable from '@loadable/component';
const Test = loadable(() => import('./Test'));

<Test onLoad={() => console.log('loaded')} />

// Test.js
import React, { useEffect } from 'react'

export default function Test({ onLoad }) {
  useEffect(() => { onLoad() }, [])
  return null
}

from loadable-components.

@neoziro

client side:

router config:

{
    path: `/index`,
    exact: true,
    page: 'Index',
    meta: {
        title: 'aaaaa'
    },
    component: loadable(props => {
        return import(/* webpackChunkName: "Index" */
        `../pages/Index/Index`)
    })
},

index page:

../pages/Index/Index

class IndexPage extends Component {
  // ...
}
IndexPage.serverApiNames = "indexApi,commonApi"  //static properties,

server side:

let currentRoute = routes[0].routes.find(router =>
    matchPath(ctx.request.path, {
        path: router.path,
        exact: router.exact
    })
)
let { exact, page, meta, component } = currentRoute

my question:

how can i get my static component.serverApiNames in server side.

from loadable-components.

thanks , i'll have a try.

from loadable-components.

how can i get my static component.serverApiNames in server side.

this seems to be possible now - if you know which Loadable component is loading via a route match (react router or otherwise)

you can do

const loadedComponent = await (component as DefaultImportedComponent<any>).load();
loadedComponent?.default?.accessYourStaticPropName

from loadable-components.