React : 작동하지 않는 아이에게 함수를 전달하십시오.

Question

React에 아이에게 함수를 전달하는 데 문제가 있습니다. 같은 기능을 this에 바인딩하거나 arrow 기능을 사용하는 것에 대해 이야기하는 복수 스레드를 stackoverflow에서 읽었지만 여전히 해결할 수 없습니다. 기본적으로 I는 d3.select().datum()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 (노드) .datum (this.props.datum) .call (차트) 이상;

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 구성 요소에 datum 기능을 전달하기 위해 노력하고

TypeError: this.props is undefined

됩니다. 다음 또한하여 BarChart 구성 요소의 constructor 유사 createBarChart에 기능에 datum 기능을 결합 :

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로하고있는 바와 같이, 생성자에 결합 할 수있다.