React：将函数传递给 child 不工作

Question

我在将函数传递给 React 中的 child 时遇到问题。我在 Whosebug 上阅读了多个线程，讨论将此类函数绑定到 this 或使用 arrow 函数，但仍然无法解决。基本上我需要将名为 datum 的函数传递给 d3.select().datum():

class BarChart extends React.Component {
  constructor(props){
    super(props)
    this.createBarChart = this.createBarChart.bind(this)
  }

  componentDidMount() {
     this.createBarChart()
  }

  componentDidUpdate() {
     this.createBarChart()
  }

  createBarChart() {
    console.log("In createBarChart: " + this.props.datum);
    const node = this.node
    nv.addGraph(function() {
      var chart = nv.models.discreteBarChart()
        .x(function(d) { return d.label })
        .y(function(d) { return d.value })
        .staggerLabels(true)
        //.staggerLabels(historicalBarChart[0].values.length > 8)
        .showValues(true)
        .duration(250)
        ;
    d3.select(node)
        .datum(this.props.datum)
        .call(chart);
    nv.utils.windowResize(chart.update);
    return chart;
});
  }

  render() {
    return <svg ref={node => this.node = node}
      width={1000} height={500}>
    </svg>
  }

}

module.exports = BarChart;

在上面的代码中d3.select(node) .datum(this.props.datum) .call(chart); 导致

TypeError: this.props is undefined

我正在尝试通过以下方式将 datum 函数传递给 BarChart 组件：

import datum from './datum'

class App extends React.Component {
  render() {
    return (
      <DefaultLayout title={this.props.title}>
        <div>Hello {this.props.name}</div>
        <div className='App'>
          <BarChart datum = { datum.bind(this) }/>
        </div>
      </DefaultLayout>
    );
  }
}

module.exports = App;

我试过 <BarChart datum = { () => this.datum() }/> 但没有成功。然后也在 BarChart 组件的 constructor 中绑定 datum 函数，类似于 createBarChart 函数：

 constructor(props){
     super(props)
     this.createBarChart = this.createBarChart.bind(this)
     this.props.datum = this.props.datum.bind(this)
 }

我从 datum.js 作为模块导入的 datum 函数看起来像这样：

var datum = function datumFunc() {
   return  [
    {
      key: "Cumulative Return",
      values: [
      ...
      ]
    }
  ]
}

export default datum

如有任何建议，我们将不胜感激。

Answer 1

您传递给 nv.addGraph 的匿名函数未绑定，因此调用该函数时 this 超出范围。

nv.addGraph(function() {
  var chart = nv.models.discreteBarChart()
    .x(function(d) { return d.label })
    .y(function(d) { return d.value })
    .staggerLabels(true)
    //.staggerLabels(historicalBarChart[0].values.length > 8)
    .showValues(true)
    .duration(250)
    ;
  d3.select(node)
    .datum(this.props.datum)
    .call(chart);
  nv.utils.windowResize(chart.update);
  return chart;
}.bind(this));
//^^^^^^^^^^ would fix it

或者，您可以为该函数命名并将其绑定到构造函数中，就像您已经在 createBarChart.

中所做的那样

React：将函数传递给 child 不工作

React: Pass function to a child not working

d3.js

nvd3.js

reactjs