javascript - 在 REACT 组件内使用 <script> 标签渲染 HTML

Question

我需要在 React 的组件内渲染下一个 HTML 代码:

<form action="/procesar-pago" method="POST">
  <script
   src="https://www.mercadopago.com.ar/integrations/v1/web-payment-checkout.js"
   data-preference-id="$$id$$">
  </script>
</form>

我需要执行类似的操作来呈现由 Grid.Column 组件内的脚本生成的按钮。

<Grid>
  <Grid.Column>
      <form action="/procesar-pago" method="POST">
        <script
         src="https://www.mercadopago.com.ar/integrations/v1/web-payment-checkout.js"
         data-preference-id="$$id$$">
      </script>
    </form>
  </Grid.Column>
</Grid>

我尝试了几种不同的方法，但没有一个对我有用。

谢谢!

Answer 1

要处理 React 根元素之外的 DOM 元素，您可以直接处理 DOM 更改。在这种情况下，您可以使用生命周期方法将脚本附加到组件安装时的 body 元素，然后在卸载时将其删除(如果不再需要)。

在类组件中，您可以在 componentDidMount 上执行此操作:

componentDidMount() {
    const script = document.createElement("script");
    script.src = "https://www.mercadopago.com.ar/integrations/v1/web-payment-checkout.js";
    script.id = "checkout-button";
    script.async = true;
    document.body.appendChild(script);
}

componentWillUnmount() {
    document.body.removeChild(document.querySelector("#checkout-button")); // This will remove the script on unmount
}

在使用钩子(Hook)的功能组件中:

useEffect(() => {
    const script = document.createElement('script');
    script.src = "https://www.mercadopago.com.ar/integrations/v1/web-payment-checkout.js";
    script.async = true;
    document.body.appendChild(script);
    return () => {
        document.body.removeChild(script); // This will remove the script on unmount
    }
}, []);

更新:

为了将按钮放入组件内而不是仅仅加载到主体上，您应该获取渲染的按钮，然后使用 React ref (处理 React 内的 DOM 事件)并将其附加到您的 ref 元素中。欲了解更多信息，请参阅React Refs 。我重构了代码以提高可读性。

在类组件中:

    import React, { Component } from "react";

export default class App extends Component {
    constructor() {
        super();
        this.buttonContainerRef = React.createRef(); // Creating ref element to assign as a form element attribute
    }

    componentDidMount() {
        this.scriptLoader();
    }

    componentWillUnmount() {
        this.scriptUnloader();
    }

    scriptLoader = () => {
        const script = document.createElement("script");
        script.src = "https://www.mercadopago.com.ar/integrations/v1/web-payment-checkout.js";
        script.id = "checkout-button";
        script.async = true;
        document.body.appendChild(script);
        window.addEventListener('load', this.scriptMover) // Runs when all the assets loaded completely
    };

    scriptUnloader = () => {
        document.body.removeChild(document.querySelector("#checkout-button")); // Remove the script element on unmount
    }

    scriptMover = () => {
        const button = document.querySelector(".mercadopago-button"); // Gets the button
        this.buttonContainerRef.current.appendChild(button) // Appends the button to the ref element, in this case form element
    };

    render() {
        return (
            <Grid>
                <Grid.Column>
                    <form action="/procesar-pago" method="POST" ref={this.buttonContainerRef} />
                </Grid.Column>
            </Grid>
        );
    }
}

在带有 Hooks 的功能组件中:

    import React, { useEffect, useRef } from "react";

    const App = () => {

    const buttonContainerRef = useRef(); // Creating ref element to assign as a form element attribute

    useEffect(() => {
        scriptLoader();
        return () => {
            scriptUnloader(); // Remove the script element on unmount
        };
    }, [])

    const scriptLoader = () => {
        const script = document.createElement("script");
        script.src = "https://www.mercadopago.com.ar/integrations/v1/web-payment-checkout.js";
        script.id = "checkout-button";
        script.async = true;
        document.body.appendChild(script);
        window.addEventListener('load', scriptMover) // Runs when all the assets loaded completely
    };

    const scriptUnloader = () => {
        document.body.removeChild(document.querySelector("#checkout-button"));
    }

    const scriptMover = () => {
        const button = document.querySelector(".mercadopago-button"); // Gets the button
        buttonContainerRef.current.appendChild(button) // Appends the button to the ref element, in this case form element
    };

    return (
        <Grid>
            <Grid.Column>
                <form action="/procesar-pago" method="POST" ref={buttonContainerRef} />
            </Grid.Column>
        </Grid>
    );
}

export default App;

我测试了代码，它工作正常，但请随时询问是否有任何问题。