変数を「外部」からリアクションアプリに渡すにはどうすればよいですか？

Question

create-react-app my-appを使用して反応アプリを作成しました。私は既存のWebページを持っており、反応アプリはhtmlページ内のdivに添付されています - 通常通りです。

ウェブページには、反応するアプリが機能するために必要ないくつかのグローバルjavascript定数const1とconst2があります。これらの変数を反応アプリに渡す方法はありますか？変数は再いるよう

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

は動作しません：

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

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

JavaScriptはもちろん、構築フェーズ中に縮小されているので、私はので、任意の宣言は、次のように苦労していますが、以下のような構造であります-written。

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

従いますが、evalの（とはconsole.log）はundefinedを返すように私は卑劣なこととevalを使用しようとしました。反応コンポーネントを呼び出す方法はありますか？外部から変数を渡す方法はありますか？

Answer 1

ここに2つのオプションがあります。

1. が
2. 使用環境変数windowオブジェクトを使用するにはwindowオブジェクト

   を使用して

windowオブジェクトに変数を割り当て、

myVar = 'someString' 

として変数を宣言210

または両方のケースで

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}であなたのコンポーネント内でアクセス、または%REACT_APP_MYVAR%とHTML内ですることができます。

Answer 2

EcmaScript 6では、ブロックスコープの変数と定数がlet respと宣言されました。 const。

varによる変数の「旧式」宣言とは対照的に、そのような変数respの可視性は、定数は実際のブロックに制限されます。

したがって、const1（resp。const2）のスコープは、scriptタグ内のコードにのみ制限されます。 別のスクリプトタグからconst1（resp。const2）にアクセスするには、その表示を変更する必要があります。これは、varで宣言するか、varで宣言された変数にその値を代入することで実現できます。

例えば：

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

後でリアクトアプリケーションで、あなたはwindow.visibleConst1からそれを読むことができます。