React: Pass function to a child not working

问题

I am having trouble with passing a function to child in React. I read multiple threads on stackoverflow that talk about binding such functions to this or using arrow functions, but still can not resolve it. Basically I need to pass function called datum to 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;

In the code above d3.select(node) .datum(this.props.datum) .call(chart); causes

TypeError: this.props is undefined

I am trying to pass datum function to the BarChart component in the following way:

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;

I have tried to do <BarChart datum = { () => this.datum() }/> but no luck. Then also binding datum function in the constructor of the BarChart component similarly to createBarChart function:

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

The datum function that I am importing as a module from datum.js looks like that:

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

export default datum

Any suggestion would be greatly appreciated.

回答1:

The anonymous function that you are passing to nv.addGraph is not bound, so this is out of scope when that function is called.

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

Alternatively you could give that function a name and bind it in the constructor, as you are already doing with createBarChart.

来源：https://stackoverflow.com/questions/47957424/react-pass-function-to-a-child-not-working

标签

reactjs

d3.js

nvd3.js