Question

我正在使用d3和React，并且有一些需要访问几个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函数定义为组件方法，并在componentDidMount回调中，而不是将值分配给本地g变量，您应该将其分配给this.g：

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

Answer 2

将reset()函数定义为组件方法
绑定this对reset()函数
使用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>

在React中调用第三方Lib函数

2 个答案: