Gil Gil - 2 months ago 11
React JSX Question

<script src="X"></script> inside return render | React

In React how should i declare my scripts?

on HTML looks like:

<!-- jQuery -->
<script src="../assets/vendors/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="../assets/vendors/bootstrap/dist/js/bootstrap.min.js"></script>


but how its work on React?

export default class Footerjq extends React.Component {
render () {
return (
{/* jQuery */}
script.src = "../assets/vendors/jquery/dist/jquery.min.js",
{/* Bootstrap */}
script.src = "../assets/vendors/bootstrap/dist/js/bootstrap.min.js",
);
}
}


I tried like this, but throw me an error...

Module build failed: SyntaxError: Unexpected token (9:6)

7 | script.src = "public/bundle.js",
8 | {/* jQuery */}
> 9 | script.src = "../assets/vendors/jquery/dist/jquery.min.js",
| ^

Answer

React does not allow you to do this, but you should be able to do this in your component:

componentWillMount() {
  ['../jquery.js', '../bundle.js'].forEach((src) => {
    const script = document.createElement('script');
    script.src = src;
    script.async = true;
    document.body.appendChild(script);
  });
}

But why don't you simply embed them on your index.html though?

Comments