在next(react ssr)中,我尝试渲染这样的页面使用
// this common element, so much project use this, in my private node_modules
const Header = ({ result }) => <div>{result}</div>;
const renderComponent = async () => {
// mock some request
const result = await Promise.resolve(10);
return <Header result={result} />;
};
static getInitialProps = async ctx => {
return {
Element: await renderComponent()
}
}
render({Element}){
console.log(Element)
return Element
}
{ '$$typeof': Symbol(react.element),
type: [Function: Header],
key: null,
ref: null,
props: { result: 10 },
_owner: null,
_store: {} }
{key: null, ref: null, props: {…}, _owner: null, _store: {…}}
key: null
ref: null
props: {result: 10}
_owner: null
_store: {}
__proto__: Object
所以,如何保持正确性以渲染公共元素。
正确的方法就像HMR所说的那样,将您的数据放入getInitialProps中,这将使该组件呈现两次,并且您需要自己处理empty / null状态;
static getInitialProps = async ctx => {
const result = await Promise.resolve(10);
return {
result
}
}
render() {
// Handle empty state;
if(!result) return null; // Or <EmptyPage />
return (
<Header result={result} />
)
}