Question

我之前发布过有关需要在react.js组件中添加一些脚本标签的信息。不理想，但不是我的选择。因此，我需要显示来自外部站点的作业列表：

<script src='https://www.workable.com/assets/embed.js' type='text/javascript'></script>
<script type='text/javascript' charset='utf-8'>
whr(document).ready(function(){
whr_embed(266675, {detail: 'titles', base: 'jobs', zoom: 'country', grouping: 'none'});
});
</script>
<div id="whr_embed_hook"></div>

我试图使用react-Helmet并将上述脚本标签注入需要显示列表的页面的HEAD标签中。

到目前为止，我已经尝试过：

import React, { useState } from "react";
import { Helmet } from "react-helmet";
...
return(
      <Helmet>
        <script src="https://www.workable.com/assets/embed.js" />
        <script type="javascript">
          {`
              whr(document).ready(function(){
                  whr_embed(266675, { detail: 'titles', base: 'jobs', zoom: 'country', grouping: 'none' });
              });
            `}
        </script>
      </Helmet>
...

      <div className="container-thin">
        <div id="whr_embed_hook" />
      </div>

)

该站点可以正常编译，当我在本地主机上运行该页面时，我可以看到注入到此页头中的两个脚本标签，但是作业列表未显示在目标div标签内。

我不知道我是否想念上面的东西，还是任何人认为更好的方法？

谢谢乔尔斯

使用React Helmet显示脚本标签

0 个答案: