從全球js腳本渲染響應組件

我有一個全局腳本，它現在查看點擊並顯示一條confirm消息，讓用戶知道他們將離開我們的安全站點並轉到另一個可能或不可能的站點。（注：這是爲了要求，而不是我）。從全球js腳本渲染響應組件

<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...");是否有可能從那裏渲染組件的？或者只是改變狀態？

來源

2017-01-30 John

如果你的組件是正確導出和反應，ReactDOM包括每script標籤，你可以使用

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

在你必須使用React without JSX這種情況下，當你想你的HTML文件中使用它。

替代方式，用你的包內的功能。

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

來源

2017-01-30 16:56:52 NonPolynomial

好的，當我早些時候嘗試過時，我錯過了腳本標記。但是，我認爲，這看起來並不是正確的做事方式。有沒有更好的方式來實現我在做什麼？ – John

您可以使用[Webpack]（https://webpack.github.io/）這樣的打包程序，幷包含您的函數來呈現警告，並且可以使用JSX。我將更新我的答案 – NonPolynomial

是的一切都捆綁，我有一個腳本，導入該捆綁，但我仍然收到未定義的消息。我的腳本標記類似於'' – John

從全球js腳本渲染響應組件

回答

相關問題