如何將「外部」變量傳遞給反應應用程序？

我使用create-react-app my-app創建了一個反應應用程序。我有一個現有的網頁，反應應用程序附加到HTML頁面內的div - 按照正常。如何將「外部」變量傳遞給反應應用程序？

網頁上有一些全局JavaScript常量const1和const2，這是響應應用程序正常工作所需的。有沒有一種方法可以將這些變量傳遞給反應應用程序？該結構如下

<script type="text/javascript"> 
    const const1 = "1234"; 
    const const2 = "5678"; 
</script> 

<script type="text/javascript" src = "/static/react-app.js" ></script>

我掙扎，因爲JavaScript的當然是在構建階段精縮的，所以任何聲明如下：

class App extends React.Component{ 
    constructor(props) { 
    super(props); 
    this.state = { 
     stat1: const1, 
     stat2: const2,

不工作作爲變量重新-書面。我試圖被鬼鬼祟祟地使用eval如下

const const1 = eval("function c1(){console.log(const1);return const1;};c1();");

但eval（和console.log）返回undefined。有沒有一種方法可以調用反應組件，並從外部傳遞變量？

來源

2017-06-20 Aaron

環境變量是否工作？ –

呃！天才 - 是的，它確實有用！ – Aaron

我已經包含了環境變量和另一種方法作爲解決方案。 –

我在這裏看到兩個選項。

分配變量到window對象
使用環境變量

使用window對象

要使用window對象，變量聲明爲

myVar = 'someString'

或

window.myVar = 'someString'

在這兩種情況下，內與window.myVar作出反應，你會訪問變量。這裏有一個簡單的例子：

class App extends React.Component { 
 
    render() { 
 
    return (
 
     <div> 
 
     <h1>Hello, React and ES6!</h1> 
 
     <p>Let's play. :)</p> 
 
     <p>{window.myVar}</p> 
 
     </div> 
 
    ); 
 
    } 
 
} 
 

 
ReactDOM.render(<App />, document.getElementById("app"));

html, 
 
body { 
 
    height: 100%; 
 
} 
 

 
body { 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    font-family: Helvetica Neue; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 

 
<div id="app"></div> 
 
<script> 
 
    window.myVar = 'someString2' 
 
</script>

使用環境變量

的創建作出反應應用構建允許在應用程序內environment variables to be used。要添加環境變量，請在項目的根目錄下創建一個.env文件，然後添加適當的變量並在變量名前加REACT_APP_。例如：

REACT_APP_MYVAR = "someString"

在應用這些變量可以在組件內的{process.env.REACT_APP_MYVAR}訪問，或HTML與%REACT_APP_MYVAR%內。

來源

2017-06-21 07:09:34

謝謝！我猜'myVar ='someString''類似於@Petr建議在ES6中使用'var'？ – Aaron

對我來說，window.myVar的方式不起作用，React沒有看到變量 – cal

EcmaScript 6引入了由let分別聲明的塊範圍變量和常量。 const。

與var變量的「舊式」聲明相比，這種變量的可見性分別爲：常數限於實際塊。

因此，常量const1（或const2）的範圍僅限於腳本標記內的代碼。要從另一個腳本標籤訪問const1（或const2），您需要更改其可見性。這可以通過將其聲明爲var或將其值分配給由var聲明的變量來實現。

例如爲：

<script type="text/javascript"> 
    const const1 = "1234"; 
    const const2 = "5678"; 
    var visibleConst1 = const1; 
</script>

在您的應用程序做出反應之後，你可以從window.visibleConst1閱讀。

來源

2017-06-20 21:38:43 Petr

這非常強大 - 感謝分享！我想在編譯時它會變成一個正式的環境（所以'window.visibleConst1 = const1'）變量是向後兼容的嗎？ – Aaron

如何將「外部」變量傳遞給反應應用程序？

回答

相關問題