javascript - 在 props Griddle 自定义组件中传递函数 - 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() 函数。但是我不断收到:“未捕获的类型错误:this.props.metadata.update 不是一个函数”。

在 RiderComponent 中执行更新函数的正确方法是什么？

RiderList 在 TeamManager 中呈现:

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.'}
    />
}
});