Question

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

我有两个组件DataSeries和Sector。 DataSeries组件由另一个父组件呈现。并且Sector组件由DataSeries组件呈现。我将一个函数作为属性从DataSeries传递给Sector。但是，当我尝试从Sector调用该函数时，我收到Uncaught TypeError: this.props.someFunc is not a function错误。而且我不确定为什么。有帮助吗？

这是代码。

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>
    );
  }
});

Answer 1

使用map时，this代表的上下文会发生变化。因此，目前，在map来电中，this.randomFunction实际上是"undefined"。

因此，要使用具有您的功能的Sector的{{1}}上下文，您需要将this的{{1}}绑定到{{1}匿名函数。

Sector

这样做是将匿名函数内的this的上下文设置为map中的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));。

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

1 个答案: