Aufruf von 3rd Party Lib Funktionen in React

Question

Ich benutze d3 mit React und habe einige d3 Funktionen, die Zugriff auf ein paar d3 Variablen/Objekte benötigen. Ich muss eine dieser Funktionen aufrufen, wenn componentWillReceiveProps() aufgerufen wird. Ich habe ein minimales Beispiel gegeben, die Kommentare sind das Wichtigste.

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

• definieren reset() Funktion als Komponente Methode
• Bindung this Verweis auf die reset() Funktion
• Verwenden Sie this.g, um den Wert von g zu erhalten, um ihn für verschiedene Komponentenmethoden zu verwenden.

Beispielcode:

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

Sie sollten reset Funktion als Komponente Methode definieren und in componentDidMount Rückruf statt, den lokalen g Variablen zugewiesen wird, sollten Sie es zu this.g zuweisen:

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