Question

我有一个Shop Component，它有另一个名为ShopItem的组件。大约有十几个ShopItems已呈现，并可以通过API调用获取。

//Shop
render() {
    const { classes } = this.props;
    return (
        <React.Fragment>
            <div id='shop' className={classes.shopContainer}>
                <Container className={classes.container}>
                    <div className={classes.root}>
                        <SwipeableViews index={this.state.value} onChangeIndex={this.onChange}>
                            {
                            this.props.productGroups.map((productGroup) => {
                                if (productGroup.product_ids.length > 0) {
                                    return (
                                        <TabContainer key={productGroup.id}>
                                            <div className={classes.packages}>
                                                {
                                                this.props.products.map((product, index) => {
                                                    if (productGroup.product_ids.includes(product.id)) {
                                                        return (
                                                            <ShopItem
                                                                index={index}
                                                                maxProducts={this.props.products.length}
                                                                key={product.id}
                                                                product={product}
                                                                onBuyClick={this.onBuyClick}
                                                                buyingProduct={this.state.buyingProduct}
                                                            />
                                                        );
                                                    }
                                                })}
                                            </div>
                                        </TabContainer>
                                    );
                                }
                            })}
                        </SwipeableViews>
                    </div>
                </Container>
            </div>
        </React.Fragment>
    );
// ShopItem 
render() {
    const { classes, product } = this.props;
    return (
        <React.Fragment>
            <div className={classes.package}>
                <h3 className={classes.packageTitle}>{product.title}</h3>

                <strong>${product.price}</strong>
                <div className={classes.packageDescription}>
                    <p>{product.description.split('\n')[0]}</p>
                </div>
                <button className={classes.button} data-selly-product={product.id}>
                    Buy
                </button>   
            </div>
        </React.Fragment>
    );  
}

我想嵌入this script，所以当我单击具有data-selly-product属性的按钮时，脚本将运行它的click事件。

我试图将其附加到App，Shop或什至ShopItem，除ShopItem之外，其他方法均不起作用，但是使用该方法，我为每个项目将脚本加载到文档中。

componentDidMount () {
    const script = document.createElement("script");

    script.src = "https://embed.selly.gg";
    script.async = true;

    document.body.appendChild(script);
}

我该如何解决？

Answer 1

根据https://selly.gg/help/article/embed-a-product-on-a-website的说明，应在<script src="https://embed.selly.gg"></script>文件中的</head>末尾放置public/index.html。

但是，这不会在只打开产品的页面中动态加载脚本。但是，作为SPA，除非完全重新加载网站，否则这将确保脚本被加载一次。

将外部脚本单击事件绑定到组件，但仅一次

1 个答案: