React ssr(next)-getInitialProps将reactNode插入props渲染

问题描述 投票:0回答:1

在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: {} }
  • 一次在Webside dom中呈现正确,但是很快将错误抛出到空白页,控制台是

{key: null, ref: null, props: {…}, _owner: null, _store: {…}}
key: null
ref: null
props: {result: 10}
_owner: null
_store: {}
__proto__: Object

所以,如何保持正确性以渲染公共元素。

javascript reactjs next.js
1个回答
0
投票

正确的方法就像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} />
  )
}
© www.soinside.com 2019 - 2024. All rights reserved.