Tengo un widget de reacción incrustable con la configuración del paquete web, a continuación se muestra la etiqueta del script que se incrustará en el lado del cliente.
<script> (function (w, d, s, o, f, js, fjs) { w['simple-widget'] = o; w[o] = w[o] || function () { (w[o].q = w[o].q || []).push(arguments) }; js = d.createElement(s), fjs = d.getElementsByTagName(s)[0]; js.id = o; js.src = f; js.async = 1; fjs.parentNode.insertBefore(js, fjs); }(window, document, 'script', 'w1', 'widget.js')); w1('init', { targetElementId: 'simple-widget', message: "some string" }); </script>como capturar
message: "some string"y mandarlo a reaccionar?
A continuación se muestra mi código para apiHandle
function apiHandler(api, params) { if (!api) throw Error("API method required"); api = api.toLowerCase(); let config = window[widgetConfigName]; switch (api) { case "init": config = Object.assign({}, config, params); window[widgetConfigName] = config; // get a reference to the created widget component so we can // call methods as needed widgetComponent = React.createRef(); ReactDOM.render( <Widget ref={widgetComponent} />, document.getElementById(config.targetElementId) ); break; case "message": console.log("switch case message"); // Send the message to the current widget instance widgetComponent.current.setMessage(params); break; default: throw Error(`Method ${api} is not supported`); } }A continuación se muestra mi componente de reacción Wideget.js
class Widget extends React.Component { constructor(props) { super(props); this.state = { message: null, }; } render() { console.log(this.state); return ( <div className="main_container"> {message} </div> ); } }Puede obtener la propiedad del message del elemento simple-widget si existe en sus elementos DOM.
class Widget extends React.Component { constructor(props) { super(props); this.state = { message: null, }; } componentDidMount() { const widgetElement = document.getElementById('simple-widget'); this.setState({message: widgetEelement.message}) } render() { return ( <div className="main_container"> {message} </div> ); } } En el componente montó la función, puede obtener el widget por su id y obtener la propiedad del message de él, luego establecer este mensaje en el estado.