巴貝爾6 +反應 - 傳遞初始數據（瀏覽器內傳輸）

我使用React + Babel 6和webpack。當我使用Babel 5時，很容易在頁面上使用腳本type =「text/babel」傳遞初始數據，然後使用babel-core/browser.js來處理它。巴貝爾6 +反應 - 傳遞初始數據（瀏覽器內傳輸）

但是現在，使用Babel 6時，我必須加載調用REST API的所有初始數據，因爲我的組件已安裝。

這導致打開服務器上的連接渲染前端的瀏覽器客戶端，然後前端打開一個新連接來獲取數據。

這不會影響我的服務器性能，因爲現在我有2個連接與較舊的1個連接操作？

編輯：

我希望我能繼續使用如下因素內容的網頁上：

<script type="text/javascript" src="{{ asset('app/bundle.js') }}"></script> <script type="text/babel"> var jsonVar = '{vars}'; ReactDOM.render( <App vars={vars}/>, document.getElementById('app-wrapper') ); </script>

來源

2016-06-16 bsap

有什麼關係Symfony3？ –

我正在使用Symfony3來渲染此參數。如果我不是，我可以用這個變量渲染模板服務器端。是的，我知道有一些使用Proccess和nodejs的黑客也可以在Symfony中使用它;但它的黑客。 – bsap

這是一個正常的模式來加載你的服務器端的內容，然後，你的組件抓住一些數據。當然，這種設計的一個缺點是，這意味着初始渲染加上 API請求數據。

但是，您可以設置具有反應組件的服務器端渲染，在服務器上呈現初始數據。例如，如果您的後端是nodejs，則可以使用ReactDOMServer.renderToString。

來源

2016-06-16 23:43:44 mrlew

感謝您使用renderTOString的提示！當然，這將是有用的！ – bsap

我已通過以下方式解決了此問題：使用「application/json」腳本標記（傳遞一個id）並將序列化數據放入其中。

<script type="application/json" id="app-data"> { "id" : 1 } </script>

然後在app.js：

var appData = JSON.parse(document.getElementById(script-id).innerHTML)

來源

2016-06-17 15:06:59 bsap

巴貝爾6 +反應 - 傳遞初始數據（瀏覽器內傳輸）

回答

相關問題