Question

我需要一些有关React项目中以下代码的帮助。如何在React组件中编写这样的脚本：

import React from 'react';

const SampleScript = ({ type, data }) => (
<script type="text/javascript">
{`
{
window.anyObject = window.anyObject || {};
anyObject.recommendationContext = {type: '${type}', 
data: ['${data}']};
}
`}
</script>
);

我想在我的react项目的.js文件之一中编写这样的脚本。

我使用React的Helmet组件封装了脚本标签，它完成了工作，但是在使用Helmet时遇到了其他一些问题。

我还使用了React。家族的Safe.script，但是Safe附带的脚本无法在Internet Explorer浏览器中工作。

import React from 'react';
import Safe from 'react-safe';

const SampleScript = ({ type, data }) => (
<Safe.script type="text/javascript">
{`
{
window.anyObject = window.anyObject || {};
anyObject.recommendationContext = {type: '${type}', 
data: ['${data}']};
}
`}
</Safe.script>
);

import React from 'react';
import Helmet from 'react-helmet';

const SampleScript = ({ type, data }) => (
<Helmet>
<script type="text/javascript">
{`
{
window.anyObject = window.anyObject || {};
anyObject.recommendationContext = {type: '${type}', 
data: ['${data}']};
}
`}
</script>
</Helmet>
);

Answer 1

JSX并不是JavaScript代码的理想选择（可以使用js表达式）-组件将转换为函数。

为什么不使用类组件/生命周期方法？

componentDidMount () {
    window.anyObject = window.anyObject || {};
    anyObject.recommendationContext = {
        type: '${this.props.type}', 
        data: ['${this.props.data}']
    };    
}

无法编写脚本标记，该标记在React Component

1 个答案: