props Griddle自定义组件中的Pass函数- ReactJS

Question

我有以下代码：

var RiderComponent = React.createClass({
    updater: function(){
        this.props.metadata.update();
    },

    render: function () {
        return (
            <a href="#" onClick={this.updater}>
                click!
            </a>
        );
    }
});

var RiderList = React.createClass({
    columnMeta: [
        {
            "columnName": "action",
            "displayName": "",
            "cssClassName": "buy",
            "order": 6,
            "customComponent": RiderComponent,
            "update": this.update
        }
    ],

    update: function () {
        this.props.update();
    },

    render: function () {
        return <Griddle results={this.props.data}
                        useGriddleStyles={false}
                        showFilter={true}
                        columnMetadata={this.columnMeta}
                        columns={['action']}
                        resultsPerPage={18}
                        initialSort={'value'}
                        initialSortAscending={false}
                        noDataMessage={'Geen wielrenners gevonden.'}
        />
    }
});

当我单击一个项目时，我想在RiderComponent中从RiderList运行update()函数。然而，我一直得到：‘未捕获TypeError: this.props.metadata.update不是一个函数’。

在我的RiderComponent中执行update函数的正确方式是什么？

在TeamManager中呈现RiderList：

var TeamManager = React.createClass({
    getInitialState: function () {
        return {
            results: [],
            activeRiders: [],
            extraRiders: [],
            availablePositions: []
        }
    },

    componentWillMount: function () {
        this.getExternalData();
    },

    getExternalData: function () {
        var race_id = 1; // TODO: this is hardcoded
        request = Api.getRidersPageUrl(race_id);

        $.get(request, function (rsp) {
            var data = rsp;
            var activeRiders = []; // Riders with position 0..8
            var extraRiders = []; // Riders with position 9..14
            var availablePositions = Array.apply(null, {length: 9}).map(Number.call, Number); // Array 0..8;

            if (data) {
// set data to arrays here
            }

            this.setState({
                results: data,
                activeRiders: activeRiders,
                extraRiders: extraRiders,
                availablePositions: availablePositions
            });
        }.bind(this));
    },

    render: function () {
        return (
            <RiderList update={this.getExternalData} data={this.state.results}/>
        )
    }
});

module.exports = TeamManager;

在这里，this.getExternalData只是在this.state.results中重新加载数据。

编辑:在RiderList render中使用onRowClick={this.update}时，我得到了一些有用的东西。但是，当我单击行而不是行中的特定按钮时，将触发此操作。

Answer 1

根据问题新信息更新答案，

var RiderComponent = React.createClass({
    render: function () {
        return (
            <a onClick={this.props.metadata.update}>
                click!
            </a>
        );
    }
});

var RiderList = React.createClass({
    getColumnMeta: function(){
        return[
            {
                "columnName": "action",
                "displayName": "",
                "cssClassName": "buy",
                "order": 6,
                "customComponent": RiderComponent,
                "update": this.update
            }
        ]
    },

update: function () {
    this.props.update();
},

render: function () {
    return <Griddle results={this.props.data}
                    useGriddleStyles={false}
                    showFilter={true}
                    columnMetadata={this.getColumnMeta()}
                    columns={['action']}
                    resultsPerPage={18}
                    initialSort={'value'}
                    initialSortAscending={false}
                    noDataMessage={'Geen wielrenners gevonden.'}
    />
}
});