如何在服務器端React組件中使用回調值？

Question

我在使用服務器端React來顯示我的Mongo數據庫中的玩家列表時遇到了問題。

我的目標是從mongodb和react不使用外部庫一邊，因爲我想了解基本概念之前，我開始實施先進的解決方案。

我的代碼需要一個模塊（players.js）並調用index.jsx中定義的應該處理Mongo查詢結果的回調函數。這些過程結果應該可以由組件訪問。

這就是：

players.js

var MongoClient = require('mongodb').MongoClient; 

var url = 'mongodb://localhost/collection'; 
var database; 
var players; 

module.exports = function(callback) { 

    // Initialize collection 
    MongoClient.connect(url, function(err, db) { 
     database = db; 
     database.collection('players', findPlayers); 
    }); 

    // This named callback function is here in case 
    // I want to do anything else with the collection 
    function findPlayers(err, collection) { 
     collection.find({}, getCursor); 
    } 

    function getCursor(err, cursor) { 
     cursor.toArray(function(err, players) { 
      // Invoke callback with err and players array 
      callback(err, players); 

      // Close Mongo connection 
      database.close(); 
     }); 
    } 
} 

index.jsx

var React = require('react'); 
var players = require('./players'); 

// call module and pass processPlayers function 
var competitors = players(processPlayers); 

// with the query results, return some neat JSX code 
function processPlayers(err, results) { 
    return results.map(function(player) { 
     return (
      <tr> 
       <td>{ player.rank }</td> 
       <td>{ player.name }</td> 
      </tr> 
     ) 
    }); 
} 

// Create index component class 
var Index = React.createClass({ 
    render: function() { 
     return (<main><table>{ competitors }</table></main>); 
    } 
}); 

// Export component 
module.exports = Index; 

我明白，在index.jsx我設置competitors未定義的回報，但那是因爲我卡住了。如何將competitors設置爲映射結果？

再次，我是不是尋找承諾或異步庫。 我想了解基礎知識和正確的代碼結構。如果提供了相關的庫源代碼，我甚至會很高興。

謝謝！

Answer 1

我發佈了我的問題的答案。

我用於服務器端版本的React的庫可以在here找到。

在文檔中，我發現.jsx視圖是同步的，建議我在路由中傳遞數據庫查詢結果。該數據將通過this.props作爲組件中的一個屬性公開。

所以...我走進我的路線文件，並更改從這個原代碼：

module.exports = function (req, res) { 
    res.render('index'); 
} 

要這樣：

var players = require('../helpers/players'); 

module.exports = function (req, res) { 
    // call to module with anonymous function callback 
    players(function(err, results) { 
     if (err) return console.log(err); 
     // using arg from anonymous function and 
     // passing as local variable 
     res.render('index', {'players': results}); 
    }) 
}; 

現在我的組件渲染方法看起來是這樣的..

render: function() { 

    function createPlayerRows(player) { 
     return (
      <tr> 
       <td>{ player.rank }</td> 
       <td>{ player.name }</td> 
      </tr>   
     ); 
    } 

    // `players` property provided by route 
    // mapped array using callback function which 
    // creates an array of JSX elements 
    var players = this.props.players.map(createPlayerRows); 

    return (<main><table>{ players }</table></main>); 
} 

不知道它是否會幫助任何人出去，但我肯定鬆了一口氣。