Question

我有一个返回此内容的组件：

return (
  <div className="audio-widget">
    <div
      className={this.props.className}
      onWheel={this.handleWheel}
      />
    {controls}
  </div>
)

我需要做相同的事情：

handleWheel(event) {
  let $canvas = $('.audio-widget').find('canvas');
  [...]
}

画布是由第三方脚本以编程方式绘制的，因此我无法在其上打一个ID（特别是因为这是一个组件，每页有几个）。

请原谅极端的n00b问题，我是React的新手。谢谢！

Answer 1

这是ref道具的一个很好的用例。如果您为组件提供ref道具，例如ref="foo"，在呈现该组件时，例如， this.refs.foo。然后，您可以使用React.findDOMNode获取呈现的DOM节点。

render() {
  // ...
  return (
    <div ref="audioWidget" className="audio-widget">
      <div
        className={this.props.className}
        onWheel={this.handleWheel}
        />
      {controls}
    </div>
  );
}

handleWheel(event) {
  let canvas = React.findDOMNode(this.refs.audioWidget)
                 .querySelector('canvas');
  // ...
}

您可以在此处详细了解参考资料：https://facebook.github.io/react/docs/more-about-refs.html

Answer 2

我认为，使用选择器直接访问'canvas'是一种不好的方法，原因如下：

当组件发生变化时，React会做一些差异化工作，然后用最好的方式更新你的dom，这意味着你选择的节点可能会被改为另一个节点，只是为了“最好的方式”。

您可以构建一个“子组件”，并在“父组件”的“handleWheel”中执行某些操作，然后通过“子组件”的“道具”与“子组件”进行通信

React - 如何使用jQuery样式find（）来查找DOM节点的子节点？

2 个答案: