Javascript 道具网格自定义组件中的传递函数-ReactJS

我有以下代码：

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

var RiderComponent=React.createClass({
更新程序：函数（）{
this.props.metadata.update（）；
},
渲染：函数（）{
返回(
);
}
});
var RiderList=React.createClass({
columnMeta：[
{
“columnName”：“action”，
“显示名称”：“，
“cssClassName”：“购买”，
“命令”：6，
“自定义组件”：RiderComponent，
“更新”：此为.update
}
],
更新：函数（）{
this.props.update（）；
},
渲染：函数（）{
回来
}
});

当我单击某个项目时，我想从我的RiderComponent中的RiderList运行update（）函数。然而，我不断得到：“uncaughttypeerror: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;

var TeamManager=React.createClass({
getInitialState:函数（）{
返回{
结果：[]，
活跃车手：[]，
附加条款：[]，
可用位置：[]
}
},
componentWillMount:函数（）{
这是.getExternalData（）；
},
getExternalData:函数（）{
var race_id=1；//TODO:这是硬编码的
请求=Api.GetRiderPageURL（比赛id）；
$.get（请求、函数（rsp）{
var数据=rsp；
var activeRiders=[]；//位置为0..8的骑士
var extraRiders=[]；//位置为9..14的骑士
var availablePositions=Array.apply（null，{length:9}）.map（Number.call，Number）；//数组0..8；
如果（数据）{
//在此处将数据设置为数组
}
这是我的国家({
结果：数据，
骑警：骑警，
额外乘客：额外乘客，
可用位置：可用位置
});
}.约束（这个）；
},
渲染：函数（）{
返回(
)
}
});
module.exports=团队经理；

这里this.getExternalData只需重新加载this.state.results中的数据

---

编辑：在RiderList渲染中使用onRowClick={this.update}时，我得到了一些工作。但是，当我单击该行而不是该行中的特定按钮时，会触发此命令。

根据问题的新信息更新了答案

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

var RiderComponent=React.createClass({
渲染：函数（）{
返回(
点击
);
}
});
var RiderList=React.createClass({
getColumnMeta:函数（）{
返回[
{
“columnName”：“action”，
“显示名称”：“，
“cssClassName”：“购买”，
“命令”：6，
“自定义组件”：RiderComponent，
“更新”：此为.update
}
]
},
更新：函数（）{
this.props.update（）；
},
渲染：函数（）{
回来
}
});

我们甚至不知道你是否正确地传递了道具，你能发布完整的组件吗？当我使用“更新”时，道具是正确传递的：“这是一个测试”和console.log（this.props.metadata.update）这是一个测试。然而，这个.update给了我“未定义”。我编辑了一点主要的帖子。我添加了更新程序功能，但是在页面加载时我得到了：Uncaught TypeError:this.updater.bind不是一个函数。我猜是一个输入错误。使用onClick而不是onClick。我尝试了两者，但似乎没有任何区别，得到了相同的错误嗯。。。您能否提供RiderList和TeamManager的完整代码，其中RiderList是呈现的？缺少网格组件实现。你能再加上那个吗？需要检查更新函数是如何传递给RiderComponent的。