时间戳

首页 > 解决方案 > 无法使用 Helmet 获取 Reactjs 来运行脚本标签

reactjs - 无法使用 Helmet 获取 Reactjs 来运行脚本标签

问题描述

我在 Reactjs 中使用 Helmet 来提供每页的元数据 - 在我想在标签中提供 Schema 标记之前，它工作得很好。我正在按照文档描述来实现，但是由于我的标记来自 api，我需要转义代码以返回我的函数，我得到这个错误；

TypeError: tag[primaryAttributeKey].toLowerCase 不是函数

如果脚本只是页面上的一个字符串，则该脚本可以工作，但是当我调用该函数时，它会出错

这是我的代码；

async componentWillMount(){
        var data = await api.schema();
        this.setState({schema: data.data});
        console.log(this.state.schema);
    }


    getSchema(){
        if(this.state.schema.length){
            return this.state.schema.map((content,index) => {
                var pageschema = content.PageSchema;

                return(
                    pageschema
                );
            })
        }
    }

render() {
        return (

        <div>
            <Helmet>
                <meta charSet="utf-8" />
                <title>Title title title</title>
                <meta name="description" content="this is a page description"></meta>
                <link rel="canonical" href="xxx" />
                <script type="application/ld+json">{this.getSchema()}</script>
            </Helmet>
...

页面模式返回以下已 JSON.parsed

"@context": "https://schema.org",
"@type": "Organization",
"name": "xx",
"alternateName": "xx",
"url": "xx",
"logo": ""

有没有人有什么建议？

标签： reactjsreact-helmet

解决方案

要工作，您需要在发送之前对数组进行字符串化Helmet：

getSchema(){
    const { schema } = this.state

    if(schema.length){
        return `${JSON.stringify(
            schema.map((content,index) => {
                const pageschema = content.PageSchema;

                return(
                    pageschema
                );
            })
        )}`
    }
}

推荐阅读