Question

我想引用位于子组件中的元素。我在其父组件中使用document.getElementById，它运行良好，但我听说使用ref是更好的做法。这是真的？如果是这样，那怎么办？

父（容器）组件：

import CanvasView from '../view/CanvasView'

export default class CanvasContainer extends Component {
  componentDidMount(){
    var c = document.getElementById('canvas')
    //DO SOMETHING WITH c
  }

  render(){
    return(
      <CanvasView />
    )
  }
}

儿童（演示）组件：

export default const CanvasView = () => (
  <canvas id="canvas"></canvas>
)

Answer 1

使用React的生命周期事件有点乱，查询DOM元素也是不好的做法。此外，由于子组件有自己的生命周期，因此处理这些情况很棘手。此外，由于父组件无法访问孩子refs，因此您无法访问子refs。您可以传递回调函数，并将选定的子元素作为对父组件的引用传递。

var CanvasView = React.createClass({
  componentDidMount(){
    console.log('Child component did mount, do your stuff')
    this.props.callback(this.exampleRef)
  },
    render: function(){
    return(<div ref={(ref) => this.exampleRef = ref}>Foo</div>)
  }
});

var CanvasContainer = React.createClass({
    doSomethingWithChild(child){
    console.log('Parent component')
    child.style.backgroundColor='red';
  },
  render: function(){
    return(<CanvasView callback={(e) => this.doSomethingWithChild(e)}/>);
  }
});

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

https://jsfiddle.net/nwwzyttt/2/

如何引用子组件中的元素？

1 个答案: