Reactで第三者Lib関数を呼び出す

Question

私はReactでd3を使用しており、いくつかのd3関連変数/オブジェクトにアクセスする必要のあるd3関連関数をいくつか持っています。 componentWillReceiveProps（）が呼び出されたときにこれらの関数を呼び出す必要があります。私は最小限の例を提供し、コメントは最も重要なものです。

class App extends Component { 
    constructor() { 
     super(); 
    } 

    shouldComponentUpdate() { 
     return false; 
    } 

    componentWillReceiveProps(nextProps) { 
     /* Need to call reset() here */ 
    } 

    componentDidMount() { 
     let svg = d3.select(this.refs.map).append('svg') 
      .attr('width', width) 
      .attr('height', height); 

     let g = svg.append('g') 
      .style('stroke-width', '.4px'); 

     function reset() { 
      /* needs access to g */ 
      g.transition() 
       .duration(1500) 
       .style('stroke-width', '.4px') 
       .attr('transform', ''); 
     } 
    } 

    render() { 
     return (
      <div id="map" ref="map"></div> 
     ) 
    } 
} 

Answer 1

• はコンポーネントとしてreset()関数を定義メソッド
• バインドthisreset()関数への参照
• this.gを使用して、異なるコンポーネントメソッド間で使用するgの値を取得します。

サンプルコード：

class App extends React.Component { 
 
    constructor() { 
 
     super(); 
 
     this.reset = this.reset.bind(this) 
 
    } 
 

 
    shouldComponentUpdate() { 
 
     return false; 
 
    } 
 

 
    componentWillReceiveProps(nextProps) { 
 
     this.reset(); 
 
    } 
 

 
    componentDidMount() { 
 
     let svg = d3.select(this.refs.map).append('svg') 
 
     .attr('width', '100px') 
 
     .attr('height', '100px'); 
 

 

 
     // Assigning value to `this.g` to be able use it in other methods. 
 
     this.g = svg.append("circle") 
 
     .attr("cx", 25) 
 
     .attr("cy", 25) 
 
     .attr("r", 25) 
 
     .style("fill", "purple"); 
 
    } 
 

 
    reset() { 
 
     // After component will be mounted, you would have needed value in `this.g`. 
 
     this.g.transition() 
 
     .duration(1500) 
 
     .style("fill", "red"); 
 
    } 
 

 
    render() { 
 
     return (<div> 
 
      < div id = "map" 
 
      ref = "map" > < /div> 
 
     <button onClick={this.reset}>Reset</button > 
 
      < /div> 
 
    ) 
 
    } 
 
} 
 

 
ReactDOM.render(<App/> , document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 
 
<div id="app"></div>

Answer 2

あなたは代わりにローカルg変数に値を割り当てるので、あなたはthis.gに割り当てる必要があり、部品の方法としておよびcomponentDidMountコールバックでreset関数を定義する必要があります

class App extends Component { 
    constructor() { 
    super(); 
    } 

    shouldComponentUpdate() { 
    return false; 
    } 

    componentWillReceiveProps(nextProps) { 
    this.reset(); 
    } 

    componentDidMount() { 
    let svg = d3.select(this.refs.map).append('svg') 
     .attr('width', width) 
     .attr('height', height); 

    // Assigning value to `this.g` to be able use it in other methods. 
    this.g = svg.append('g') 
     .style('stroke-width', '.4px'); 
    } 

    reset() { 
    // After component will be mounted, you would have needed value in `this.g`. 
    this.g.transition() 
     .duration(1500) 
     .style('stroke-width', '.4px') 
     .attr('transform', ''); 
    } 

    render() { 
    return (
     <div id="map" ref="map"></div> 
    ) 
    } 
}