Question

我有一个全局脚本，现在查看点击并显示confirm消息，让用户知道他们将离开我们的安全网站并转到另一个可能会或可能不会。（注意：这是针对要求而不是由我决定）。

<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>

我想要做的是显示现有组件。

我拥有的组件是......

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

而不是调用confirm("Warning message...");是否可以从那里渲染该组件？或者只是改变状态？

Answer 1

如果您的组件导出正确并且每个script标记包含React和ReactDOM，则可以使用

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

在这种情况下，如果要在HTML文件中使用它，则必须使用React without JSX。

替代方法，使用捆绑包中的功能。

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

从全局js脚本渲染反应组件

1 个答案: