如何在服務器端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我index.jsx competitors設置為未定義的回報，但這是因為我被困住了。 如何將competitors設置為映射結果？

同樣，我不是在尋找Promise或異步庫。 我想學習基礎知識和適當的代碼結構。 如果提供了相關的庫源代碼，我什至會很高興。

謝謝！

Answer 1

我正在發布問題的答案。

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

在文檔中，我發現.jsx視圖是同步的，建議我在路由中傳遞數據庫查詢結果。 此數據將通過this.props作為組件中的屬性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> );
}

不確定是否會幫助任何人，但我一定松了一口氣。