Question

我知道你可以调用React.findDOMNode（this），但还有另一种方法吗？我想知道是否保留了引用（当组件安装时显然可用）。

Answer 1

我不知道您对当前原生元素的意思，但是：你可以使用参考。

class Container extends Component {
  componentDidMount(){
    this.refs.main.innerHTML = "Yep";
  }

  render(){
    return (
      <div ref="main" >Hello World</div>
    )
  }
}

正常情况下，上面的代码在屏幕上显示“是”。

只需将ref属性添加到ex <div ref="main">Hello World</div>的任何元素，然后您可以使用以下代码访问componentDidMount中的参考：this.refs.main

Answer 2

React和refs已经成为移动目标了一段时间。

Facebook has said字符串引用已弃用。

如果您以前使用过React，那么您可能熟悉一个旧的API，其中ref属性是一个字符串，例如＆＃34; textInput＆＃34;，并且DOM节点作为this.refs.textInput访问。我们建议不要使用它，因为字符串引用有一些问题，被认为是遗留问题，很可能会在未来的某个版本中删除。如果您当前正在使用this.refs.textInput访问引用，我们建议您使用回调模式。

目前的最佳做法是回调参考。理想情况下，您使用setState管理组件状态。但是，如果您需要使用其他lib或动画，则必须使用refs。另见：ReactDOM.findDOMNode()

JSFiddle

const HowdyPardner = React.createClass({
  _getHeaderEl: function( el ) {
    this.headerEl = el;
  },
  componentDidMount() {
    this.headerEl.textContent = 'YEEHAW';
  },
  render: function() {
   return (
     <h1 ref={this._getHeaderEl}>Howdy Pardner!</h1>
   ); 
  }
});

你如何获得组件的当前原生元素？

2 个答案: