Menu
There are a bunch of answers on this, but I'm looking for something specific to reactjs
My component code:
render: function () {
return (
<Modal {...this.props} title="Embed on your own site!">
<div className="modal-body">
<div className="tm-embed-container" dangerouslySetInnerHTML={{__html: embedCode}}>
</div>
<textarea className="tm-embed-code" rows="4" wrap="on" defaultValue={embedCode}></textarea>
</div>
</Modal>
);
}
});
The script tag is there on the page, but no execution. Should I go outside of react and just use good ol' DOM scripting as the other answers indicate?
767
We start by creating an empty <script></script> tag in the memory as script and then assign the necessary attributes to its src and the id to identify the script later. Finally, we append the script to our <body></body> tag to actually load this.
Adding a new script tag and directly appending it to the <head> element of the page is the easiest way to add <script> tags in the React app. react-helmet is a third party library that can be used to achieve the same thing by handling the <head> tag on every page.
You can put any valid JavaScript expression inside the curly braces in JSX. For example, 2 + 2 , user. firstName , or formatName(user) are all valid JavaScript expressions. In the example below, we embed the result of calling a JavaScript function, formatName(user) , into an <h1> element.
Loading external scripts in your React application can be as easy as adding a script tag to the HTML file that loads your React bundle; but this isn't always easy or possible. In this article you will learn how to add script tags programmatically, using JavaScript and standard DOM APIs. Create a new element of type script. Set its src attribute.
In this article, we will see different ways to include JavaScript inside a react application. If you want the script to be loaded on every page of your application, you can directly add it to the index.html as shown below: 1... 8... If you run the application, inspect and check, you will see the script added inside the head tag:
Another way is to load the script is to load it dynamically. You can load script on that page on which is it really required You can have a fallback UI till the script is being loaded. It will improve make the user experience better. Since our website is in React, I am going to use hooks for loading script dynamically.
If we don’t find an existingScript; we create the script dynamically. We start by creating an empty <script></script> tag in the memory as script and then assign the necessary attributes to its src and the id to identify the script later. Finally, we append the script to our <body></body> tag to actually load this.
For what I understand, the react way would be to use the "componentDidMount" function to insert what you want in the the div, including some external script.
If your component is dynamic and receive regulary new props, you should also consider other methods (like componentDidUpdate).
More about script insertion with jQuery on this question
componentDidMount: function(){
var embedCode = this.props.embedCode; // <script>//my js script code</script>
$('#scriptContainer').append(embedCode);
},
render: function () {
return (
<Modal {...this.props} title="Embed on your own site!">
<div className="modal-body">
<div className="tm-embed-container" id="scriptContainer">
</div>
<textarea className="tm-embed-code" rows="4" wrap="on" defaultValue={this.props.embedCode}></textarea>
</div>
</Modal>
);
}
});If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
