52

定義された要素があり、ref最終的にページにレンダリングされます:

    <div ref="russian" ...>
       ...
    </div>

などのDOM要素のプロパティにアクセスしたいoffset...。しかし、私は取得し続けてundefinedおり、その理由がまったくわかりません。いくつかの検索の後refs、1 つのファイルにのみ適用されることは明らかですが、この 1 つのページ以外では使用していません。私はそれを記録するためにこれを言っています：

console.log('REFS', this.refs.russian);

何が原因でしょうか?

4

6 に答える 6

43

子コンポーネントがマウントされる前に ref にアクセスしていないことを確認してください。たとえば、 では機能しませんcomponentWillMount。要素がマウントされた後にref関連のコールバックを自動的に呼び出す別のパターンはこれです-

<div ref={(elem)=>(console.log(elem))}/>

この表記法を使用して、マウントされた要素を深いネスティングで取得することもできます-

<div ref={this.props.onMounted}/>
于 2016-02-05T17:45:28.667 に答える
36

作業する正しい場所は、 ComponentDidMount、ComponentDidUpdaterefsなどの特定の React ライフサイクル メソッド内です。

refsメソッドから参照することはできませんrender()。作業上の注意については、refsこちらをご覧ください。

またはライフサイクル メソッドconsole.log('REFS', this.refs.russian);への呼び出しを移動した場合(React >= 14 を使用していると仮定)、結果として未定義になることはありません。ComponentDidMountComponentDidUpdate

更新:また、上記の注意リンクに従って、参照はステートレス コンポーネントでは機能しません。

于 2016-02-10T01:37:41.370 に答える
9

React バージョン 16.4 以降の更新

コンストラクターメソッドで、次のようにrefを定義します

constructor(props) {
  super(props);
  this.russian = React.createRef();
}

使用しているレンダリングでこれをref行います。

<input
  name="russian"
  ref={this.russian} // Proper way to assign ref in react ver 16.4
/>

たとえば、コンポーネントのマウント時にフォーカスを合わせたい場合は、これを行います

componentDidMount() {
  console.log(this.russian); 
  this.russian.current.focus();
 }

リファレンス リファレンスドキュメント React

于 2018-09-02T11:10:29.483 に答える