Javascript 为什么在React.js中将函数传递给子组件时会出现未捕获的TypeError？

这是较大代码库中的一小部分。但我相信这是这个问题所需要的唯一相关部分

我有两个组件

DataSeries

和

Sector

。

DataSeries

组件由另一个父组件呈现。

Sector

组件由

DataSeries

组件呈现。我将函数作为属性从

DataSeries

传递到

扇区

。但是当我试图从

扇区调用该函数时，我得到了一个
未捕获的类型错误：this.props.someFunc不是一个函数
错误。我也不知道为什么。有什么帮助吗

这是代码

var Sector = React.createClass({
  getInitialState: function() {
    return {text: '', count:'', opacity:'arc'};
  },
  formatNumber: function(num, digits) {
      //irrelevant function
      return num;
  },
  render: function() {
    var outerRadius = this.props.width/2.2;
    var innerRadius = this.props.width/3.5;
    var arc = d3.svg.arc()
        .outerRadius(outerRadius)
        .innerRadius(innerRadius);
    var data = this.props.data;
    var center = "translate(" + arc.centroid(data) + ")";
    var nameCenter = "translate(0,0)";
    var countCenter = "translate(0,50)"
    var color = this.props.colors;
    var formattedCount = this.formatNumber(this.state.count, 1)
    return (
      <g onMouseOver={this.onMouseOver} onMouseOut={this.onMouseOut} onClick={this.onClick}>
        <path className={this.state.opacity} fill={color[this.props.ikey]} d={arc(this.props.data)}></path>
        <text fill={color[this.props.ikey]} stroke={color} fontSize="27px" transform={nameCenter} textAnchor="middle">{this.state.text}</text>
        <text fill={"#868686"} stroke={color} fontSize="25px" transform={countCenter} textAnchor="middle">{formattedCount}</text>
      </g>
    );
  },

  onMouseOver: function() {

    this.setState({text: '', count:'', opacity:'arc-hover'});
    this.setState({text: this.props.name, count:this.props.data.value});
    console.log("Inside onMouseOver")
    this.props.someFunc();
  },
  onMouseOut: function() {
    this.setState({text: '', count: '', opacity:'arc'});
  },
  onClick: function() {
    //Do something on click?
  }
});

var DataSeries = React.createClass({
  propTypes: {
    width: React.PropTypes.number.isRequired,
    height: React.PropTypes.number.isRequired,
    color: React.PropTypes.array,
    data: React.PropTypes.array.isRequired,
  },
  randomFunction: function() {
    console.log("Random Function")
  },
  render: function() {
    var color = this.props.colors;
    var data = this.props.data;
    var width = this.props.width;
    var height = this.props.height;
    var pie = d3.layout.pie();
    var result = data.map(function(item){
      return item.count;
    })
    console.log(result)
    var names = data.map(function(item){
      return item.name;
    })
    var sum = result.reduce(function(memo, num){ return memo + num; }, 0);
    var position = "translate(" + (width)/2 + "," + (height)/2 + ")";
    var arcs = (pie(result)).map(function(point, i) {
      return (
        <Sector 
           data={point} 
           ikey={i} 
           key={i} 
           name={names[i]} 
           colors={color} 
           total={sum} 
           width={width} 
           height={height} 
           someFunc={this.randomFunction}/>
      )
    });
    return (
        <g transform={position}>
        {arcs}
        </g>
    );
  }
});

var扇区=React.createClass({
getInitialState:函数（）{
返回{文本：“”，计数：“”，不透明度：'arc'}；
},
formatNumber:函数（数字，位数）{
//无关函数
返回num；
},
render:function（）{
var outerRadius=此.props.width/2.2；
var innerRadius=此道具宽度/3.5；
var arc=d3.svg.arc（）
.outerRadius（outerRadius）
.内半径（内半径）；
var数据=this.props.data；
var center=“平移（“+弧形心（数据）+”）；
var nameCenter=“翻译（0,0）”；
var countCenter=“翻译（0,50）”
var color=this.props.colors；
var formattedCount=this.formatNumber（this.state.count，1）
返回(
{this.state.text}
{formattedCount}
);
},
onMouseOver:function（）{
this.setState（{文本：“”，计数：“”，不透明度：'arc-hover'}）；
this.setState（{text:this.props.name，count:this.props.data.value}）；
log（“内部onMouseOver”）
this.props.someFunc（）；
},
onMouseOut:function（）{
this.setState（{文本：“”，计数：“”，不透明度：'arc'}）；
},
onClick:function（）{
//按一下做什么？
}
});
var DataSeries=React.createClass({
道具类型：{
宽度：React.PropTypes.number.isRequired，
高度：React.PropTypes.number.isRequired，
颜色：React.PropTypes.array，
数据：React.PropTypes.array.isRequired，
},
随机函数：函数（）{
console.log（“随机函数”）
},
render:function（）{
var color=this.props.colors；
var数据=this.props.data；
var width=this.props.width；
var height=this.props.height；
var pie=d3.layout.pie（）；
var结果=data.map（函数（项）{
返回项目。计数；
})
console.log（结果）
变量名称=data.map（函数（项）{
返回item.name；
})
var sum=result.reduce（函数（memo，num）{return memo+num；}，0）；
var position=“translate”（“+（宽度）/2+”，“+（高度）/2+”）；
变量弧=（饼图（结果））.map（函数（点，i）{
返回(
)
});
返回(
{arcs}
);
}
});
使用
map
时，此
所表示的上下文会发生变化。因此，目前，在您的
映射
调用中，
这个.random函数
实际上是
“未定义的”

因此，要使用包含您的函数的
扇区
this
的上下文，您需要将
扇区
this
绑定到
映射的匿名函数

var arcs = (pie(result)).map(function(point, i) {
  return (
    <Sector 
      data={point} 
      ikey={i} 
      key={i} 
      name={names[i]} 
      colors={color} 
      total={sum} 
      width={width} 
      height={height} 
      someFunc={this.randomFunction}
    />
  )
}.bind(this));

var arcs=（饼图（结果））.map（函数（点，i）{
返回(
)
}.约束（这个）；

这样做的目的是将匿名函数中的
this
的上下文设置为
扇区中的
this
，这样做有效。非常感谢。我的判断明显失误，一旦你指出，我现在就明白了。