React同構 - 同時發生客戶端/服務器動作

我試圖用React和Node（同構呈現體系結構）構建我的應用程序。我發現在github示例項目上，但我有問題。我想一起開發我的項目客戶端和服務器，同一個組件可以同時從客戶端nad服務器獲取數據/操作。例如：React同構 - 同時發生客戶端/服務器動作

var Component = React.createClass({ 
    render: function() { 
    return (
     <div className="commentBox"> 
     {this.props.client} 
     {this.props.server} 
     </div> 
    ); 
    } 
});

您可以看到，Component從客戶端和服務器獲取道具。我怎麼能做到這一點？我嘗試了3個github項目，但始終無法實現它。我不知道爲什麼。當然，當我僅通過服務器或僅由客戶端呈現組件時，它正在工作，但它不能一起工作。

例如，當我通過服務器呈現組件時，我無法爲客戶端提供任何特定操作（onclick alerting等）。所以這對我來說很重要。呈現服務器中的一些數據並進行一些客戶端操作。但是在一起，仍然在同一個組件上。

對不起我可憐的英語！

來源

2016-01-03 Jan Kowalski

一月，這是不可能的使用React。

他們不「同時」工作。
服務器端React代碼通過將HTML頁面構建爲文本字符串並將HTML文本提供給客戶端來工作。
瀏覽器加載頁面後，瀏覽器中的React代碼將自己附加到放置在頁面上的React代碼中（因爲服務器輸出所有組件的ID，供瀏覽器附加，之後）。

然後，目標是將數據提供給組件，而不是期望同時訪問瀏覽器和服務器。這樣，您可以使用服務器端代碼獲取組件的數據，並且可以使用客戶端代碼獲取組件的數據，並且組件不會在意。

這是不是很有效的反應，或以正確的方式做JS，一般但看看：

class ServerElement { 
    render () { 
    // sync calls should rarely ever (ideally never, other than booting up) be used 
    var articles = db.syncGetArticles(); 

    return <Articles articles={ articles } />; 
    } 
} 

class BrowserElement { 
    render () { 
    // isn't real, and should never be used even if it was 
    var articles = ajax.sync("GET", "/articles"); 

    return <Articles articles={ articles } />; 
    } 
}

這裏的重要組成部分，是不是服務器或瀏覽器元素（就像我說的，這是不是真的會起作用），而是<Articles />元素不期待服務器或瀏覽器;它期待着一篇文章列表。

然後，這種方法的好處是服務器構建HTML，但在提供頁面之前，它會預填充數據，稍後將在瀏覽器中更新（替換或添加）數據。

我希望有幫助;如果沒有，請提問，然後我會嘗試添加答案。

來源

2016-01-03 22:11:29 Norguard

@Norguard謝謝您的全面解答。我想要擁有你的答案。我知道你的示例代碼對React/JS無效，因此我們必須在模型區域構建我們的數據庫操作。但有一件事讓我感到困惑。我們正在使用我們的'/ articles'發送API並從中獲取數據。好吧，它很酷，但這仍然是公開數據。我想知道私人數據。如何使用React Isomorphic獲取特定數據或服務器if/else條件來構建更好的應用程序。

如果我們使用客戶端模板語言（如ejs），它非常容易。我們正在建立我們的.html文件和注入服務器方法（或其他）到模板語言的特定標記。在React服務器中如何做到這一點？我無法想象使用組件和服務器。

我認爲我明白你向我展示的想法，但需要時間有效地使用React構建同構應用程序。

來源

2016-01-04 12:23:15

React同構 - 同時發生客戶端/服務器動作

回答

相關問題