Call javascript function from react in txt/javascript

Question

So i have this react component I wanted to use inside a plain html page served by flask

All works fine with my build/development with gulp But now i wanted to use a specific part in my flask app

So in my app.js I have

var RenderX = function() {
    ReactDOM.render(
        <Example/>, document.getElementById('app')
    );
};

exports = RenderX;

Now I want to call this function inside my html page (served by flask)

<script src="/static/scripts/vendor.js"></script>
<script type="text/javascript" src="/static/scripts/app.js"></script>
<script type="text/javascript">RenderX();</script>

It tells me RenderX can not be found How can i solve this problem I am facing

I want to migrate some part of my code bit by bit to react.

When you look at the developer tools (F12) does it show that app.js has been imported or is there an error? — Shaggy
– Shaggy, Commented Mar 12, 2016 at 13:48

Dan Prince · Accepted Answer · 2016-03-12 13:48:25Z

1

It looks like you're using a module bundler to handle your dependencies. Maybe Browserify or Webpack?

exports = RenderX;

When the module bundler combines your files to create scripts/app.js it wraps each of them in a immediately invoked function expression.

// simplified version
(function(module, exports) {
  var RenderX = function() {
    ReactDOM.render(
      <Example/>, document.getElementById('app')
    );
  };

  exports = RenderX;
})();

Setting exports doesn't expose your function as a global variable, because exports is just a value handled by the module bundler.

Instead, declare the function directly on the window object.

var RenderX = function() {
  ReactDOM.render(
    <Example/>, document.getElementById('app')
  );
};

window.RenderX = RenderX;

That way you'll be able to call it from outside the scope of your module.

answered Mar 12, 2016 at 13:48

Dan Prince

30.1k15 gold badges94 silver badges124 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

cricque Over a year ago

Thank you very much, i knew I was missing something, but this does the trick

Collectives™ on Stack Overflow

Call javascript function from react in txt/javascript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related