React入門工具包Main.js沒有被連接到客戶端

我正在用最新的React入門工具包（Isomorphic）構建應用程序，並遇到問題。許多應用程序都有靜態數據，所以我首先使用服務器端渲染製作了一些頁面。React入門工具包Main.js沒有被連接到客戶端

但是，當我做了一個頁面，添加一個onClick回調到按鈕，回調從未被調用。

一段時間後，我發現我能得到它通過增加上班以下的HTML父組件：

<script async src="/assets/main.js"></script>

而且現在的網頁就像它應該。但我不認爲這是正確的解決方案，因爲當我使用「-release」構建應用程序時，會發射帶有散列標籤的main.js（例如main.63635afefa6a.js），並在部署時找不到。

我是什麼在這裏失蹤？

來源

2016-08-15 Mark Miller

//這個答案描述RSK，因爲它目前是，它不是從你的問題清楚，如果你修改RSK的Html組件或服務器端路由（也可能已經破解您的應用程序）

什麼是main.js？

main.js是你的所有JavaScript被WebPack捆綁在一起的地方，這就是爲什麼強制添加引用它的腳本標籤使其適用於非發佈版本的原因。

但是，你應該使用--release建立，因爲...

如果您在使用--release構建應用程序，文件內容哈希被添加到文件名。這意味着當內容更改文件名更改時。

由於舊版本（例如，在ISP）的任何緩存都針對具有不同名稱的文件，因此用更新名稱請求更新文件的客戶端將保證不會獲得舊版本。

那麼如何用散列指定正確的main.js名？

的Html組分應該在<body>像JSX片段：

{script && (
     <script 
     id="source" 
     src={script} 
     data-initial-state={JSON.stringify(state)} 
     /> 
    )}

此工作在標準RSK因爲script變量包含main.js文件名（與使用時包括在散列 - - 釋放構建）。這個變量值來自由WebPack構建的assets.js。然後通過server.js通過注入將Html組件用於以上片段：

app.get('*', async (req, res, next) => { 
    const data = { title: '', description: '', style: '', script: assets.main.js, children: '' };  
    // ... 
    const html = ReactDOM.renderToStaticMarkup(<Html {...data} />);

來源

2016-08-19 19:44:41 cfogelberg

謝謝。由於我不記得我更改server.js的原因。但我檢查了我的Html，js，它只有{script &&

相關問題

React入門工具包Main.js沒有被連接到客戶端

回答

相關問題