-4

I have a hello.js (it's babelify transpiled react code) loaded with:

<script type="text/javascript" src="/static/js/hello.js"></script>

and I want to append a few lines of code to the end of it. Is that possible?

Edit: The lines I want to add are:

var hello = _react["default"].createElement(Hello, {                             
  name: "World!!!"                                                                
});                                                                              

_reactDom["default"].render(hello, document.getElementById('hello'));

Where Hello, _react, _reactDom are all objects created in hello.js. The lines themselves are arbitrary. My real question is can I add code to a prexisting script in the browser?

thekthuser
  • 706
  • 1
  • 12
  • 28
  • What kind of lines? – Ry- May 20 '19 at 18:47
  • 1
    no clue what you want.... – epascarello May 20 '19 at 18:47
  • yes you can write the js file with some new lines of code at server side and then can reload the file again in browser. check this https://stackoverflow.com/questions/585234/how-to-read-and-write-into-file-using-javascript – Waseem Bashir May 20 '19 at 18:52
  • So set up the build script to add lines of code to it? – epascarello May 20 '19 at 18:54
  • 1
    No, you can't read the content of a script without performing another ajax request, you can't change the content of a script that has already ran, and you can't change it before it runs on the client. You can alter it client-side using your F12 devtools then reload the page with the altered script, but that will of course only work for you. – Kevin B May 20 '19 at 19:03
  • That doesn't sound so *Reactily*, you may want to read [thinking in react](https://reactjs.org/docs/thinking-in-react.html). – k3llydev May 20 '19 at 19:04
  • @k3llydev I'm in this situation because I want to pass props to a React component at the time a Jinja2 template is rendered. I don't know what those props' values will be until that moment, otherwise I would put the component's create/render lines in my original, not yet babelified code. – thekthuser May 20 '19 at 19:18
  • @thekthuser What if you handle everything in React after the template is done rendering? – k3llydev May 20 '19 at 19:21
  • @k3llydev Yeah, that's an option, but it requires quite a bit of code being re-written. I kinda feel like reactjs.org was lying when it said "you can use as little or as much React as you need." – thekthuser May 20 '19 at 19:25
  • @thekthuser did you imported correctly the respective [React CDN's](https://reactjs.org/docs/cdn-links.html) needed for your project? – k3llydev May 20 '19 at 19:31
  • Why can't react pull that data out of the dom? or with fetch? or from the url? from cookies? from localstorage? there's all these other ways of passing data around. – Kevin B May 20 '19 at 19:32
  • This is an [XY problem](http://xyproblem.info). I suggest you post a new question that asks directly about the real problem you're having ("how to pass props to a React component at the time a Jinja2 template is rendered") instead of this assumed solution. – JJJ May 20 '19 at 19:48

1 Answers1

-3

Once you import a JavaScript file, you are able to use (and modify) its exposed variables, functions, etc.

If your hello.js has an exposed variable like: 

let hello = 'Hello'

You would be able to modify it after the file is imported, for example:

<script src='hello.js'></script>
<script>
  console.log(hello); // prints 'Hello'
  hello = 'HELLO'
  console.log(hello); // prints 'HELLO'
</script>
Claudio Busatto
  • 721
  • 7
  • 17
  • This would be perfect, but all I get is `ReferenceError: hello is not defined`, unless I make it a global variable with `window`. – thekthuser May 20 '19 at 19:08
  • The initial version of the questions did not include the whole context included later. In the example I wrote, of course, `hello` is in the global scope therefore it is accessible. – Claudio Busatto May 21 '19 at 09:34