Render react component from global js script

Question

I have a global script that right now looks at clicks and shows a confirm message to let the user know they are leaving our secure site and going to another which may or may not be. (Note: this is for requirements and not up to me).

<script type="text/javascript">
    function interceptClick(e) {
        const target = e.target;
        const hostName = window.location.hostname;
        if (target.tagName === 'A') {
            const href = target.getAttribute('href');
            if (href.indexOf(hostName) === -1) {
                const r = confirm("Warning message....");
                if(!r){
                    e.preventDefault();
                }
            }
        }
    }
</script>

What I want to do is display an existing component.

The component I have is...

import React, { Component } from 'react';
import {Modal} from 'react-bootstrap';

export default class Warning extends Component {

constructor(props) {
    super(props);
    this.state ={
        showModal : false
    };
}


open() {
    this.setState({
        showModal : true
    });
}

close() {
    this.setState({
        showModal: false
    });
}

render() {
    return (
        <Modal show={this.state.showModal} onHide={this.close.bind(this)}>
            <Modal.Header closeButton>
                <Modal.Title>Modal heading</Modal.Title>
            </Modal.Header>
            <Modal.Body>
                <h1>Body</h1>
            </Modal.Body>
        </Modal>
    );
}
}

Instead of calling confirm("Warning message..."); Is it possible to render that component from there? Or just change the state?

NonPolynomial · Accepted Answer · 2017-01-30 17:18:50Z

2

if your component is exported properly and React and ReactDOM are included per script tag, you can use

ReactDOM.render(
    React.createElement(Warning),
    document.body
);

In that case you have to use React without JSX, when you want to use it within your HTML file.

Alternative way, use the function within your bundle.

function interceptClick(e) {
    const target = e.target;
    const hostName = window.location.hostname;
    if (target.tagName === 'A') {
        const href = target.getAttribute('href');
        if (href.indexOf(hostName) === -1) {
            ReactDom.render(
                <Warning></Warning>,
                document.body
            );
        }
    }
}

edited Jan 30, 2017 at 17:18

answered Jan 30, 2017 at 16:56

NonPolynomial

3192 silver badges6 bronze badges

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

4 Comments

John Over a year ago

Ok, I was missing the script tag when I tried that earlier. But this doesn't seem like the right way to be doing things, I don't think. Is there a better way to achieve what I'm doing?

NonPolynomial Over a year ago

You can use a bundler like Webpack and include your function to render your Warning and just can use JSX. I will update my answer

John Over a year ago

Yeah everything gets bundled, and I have a script that imports that bundle, but I'm getting undefined messages still. My script tag is something like <script src="~/js/appBundle.js"></script>

NonPolynomial Over a year ago

What exactly is undefined and when do you get it?

Collectives™ on Stack Overflow

Render react component from global js script

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related