Question

我正在尝试构建一个需要在发送道具之前将数据发送到<Helmet>的应用程序，但是我不知道是否有可能，因为我在文档中看不到类似的东西。

并且无法在“头盔”组件中显示此内容。内容始终为empty

Helmet组件是HtmlPage组件。在下面的代码中，我们收到一个SEO undefined错误。

https://github.com/nfl/react-helmet/issues/409

<HtmlPage
    {...this.props.client.info.SEO}
>

    <ThemeProvider theme={this.state.theme}>
        <div className='wrapper' id='wrapper'>

            {loading && <Loading 
                client={this.state.client}
            />}

            <div className="content" id='page-wrapper'>
                <h1>Its ok for now ====</h1>

                <p>
                    {JSON.stringify(this.props.client)}
                </p>

                <div>
                    {!!this.props.client.info &&
                        <p>{JSON.stringify(this.props.client.info.SEO)}</p>} 
                </div>
            </div>
        </div>
    </ThemeProvider>
</HtmlPage>

react-helmet-async不起作用。

https://github.com/staylor/react-helmet-async

Answer 1

您需要实现第二个renderPass以使其能够收集标头元素。我为此尝试了react-tree-walker，但没有成功。最后，我使用renderToStaticMarkup添加了第二个renderPass。例如。 `

const stream = renderToNodeStream(<App preloadedState={preloadedState} />);

// extra render pass
renderPass(<App preloadedState={preloadedState} />);

`

带头盔的SSR还可以呈现异步元数据和内容吗？

1 个答案: