CODEWITHSUNDEEP
javascriptreactjs
John
John

Reputation: 1888

Render react component from global js script

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?

Upvotes: 0

Views: 138

Answers (1)

NonPolynomial
NonPolynomial

Reputation: 329

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
            );
        }
    }
}

Upvotes: 2

Related Questions