如何從服務器端包裝中跳過React組件？

在反應組件中，我使用了一個依賴瀏覽器環境的JS庫。我通過在腳本標記中指定源來使用它。但是，當從服務器端的webpack進行打包時，我從使用該庫的引用的組件中收到錯誤，因爲它不會從服務器端找到它。如何從服務器端包裝中跳過React組件？

什麼是解決方案？

來源

2017-02-16 Roy

也請讓我，如果我不是以正確的方式使用它知道。 – Roy

對不起，如果我不清楚。問題在於導入，而不是在NodeJS服務器中不起作用的任何代碼部分。只是導入語句導致加載一個像「導航器」，「窗口」，因此它在webpack構建期間失敗的引用模塊。我認爲在ES6中沒有好的方法來做條件導入。 – Roy

通常當我這樣做時，我在webpack中添加一個環境變量，然後在任何功能中檢查是否存在該環境變量。如果沒有，你在瀏覽器中。如果它在服務器上。

您還可以執行諸如檢查window是否已定義的操作。基本上以某種方式檢查你所處的環境，並使用條件來執行代碼。

來源

2017-02-16 02:39:26

你可以這樣做對你的代碼：

const Foo =() => <div>Hello</div> 
const Bar =() => <div>World</div> 

... 
render() { 
    return (typeof document === 'undefined') 
    ? <Foo /> 
    : <Bar /> 
} 
....

來源

2017-02-17 08:42:03 albertfdp

如何從服務器端包裝中跳過React組件？

回答

相關問題