如何在ReactJS中呈现标记脚本

Question

我想在响应页面的特定位置包含linkedin关注按钮。如何将下面的标签渲染成div？

<script src="//platform.linkedin.com/in.js" type="text/javascript"> lang: pt_BR</script>
<script type="IN/FollowCompany" data-id="xxxxx"></script>

感谢。

Answer 1

您可以创建一个React组件，使用dangerouslySetInnerHTML将JavaScript代码作为字符串插入来呈现脚本标记，如下所示：

function LinkedInSnippet({ id }) {
    return (
        <div>
            <script
                src="//platform.linkedin.com/in.js"
                dangerouslySetInnerHTML={{
                    __html: 'lang: pt_BR'
                }}
            />
            <script type="IN/FollowCompany" data-id={id} />
        </div>
    );
}

我认为你想要动态设置ID，所以我做了这样，以便它作为道具传递给组件。然后，您可以使用这样的组件：

<LinkedInSnippet id="xxxxxxx" />