← Back to rules

react/no-string-refs 正しさ

何を行うか

このルールは、ref 属性で文字列リテラルを使用する非推奨な動作を防止します。

なぜ悪いのか

ref 属性に文字列リテラルを使用することは、React 16.3.0 以降から非推奨になっています。

文字列リファレンスは React 19 で完全に削除されました。 したがって、React 19 以降を使用している場合は、このルールを無効化しても問題ありません。

例

このルールに対して不正なコードの例：

var Hello = createReactClass({
  render: function () {
    return <div ref="hello">こんにちは、世界。</div>;
  },
});

var Hello = createReactClass({
  componentDidMount: function () {
    var component = this.refs.hello;
    // ...component を使って何か処理
  },
  render: function () {
    return <div ref="hello">こんにちは、世界。</div>;
  },
});

このルールに対して正しいコードの例：

var Hello = createReactClass({
  componentDidMount: function () {
    var component = this.hello;
    // ...component を使って何か処理
  },
  render() {
    return (
      <div
        ref={(c) => {
          this.hello = c;
        }}
      >
        こんにちは、世界。
      </div>
    );
  },
});

設定

このルールは、次のプロパティを持つ設定オブジェクトを受け入れます。

noTemplateLiterals

type: boolean

default: false

文字列リテラルに加えてテンプレートリテラルも禁止します。

使用方法

設定ファイルまたは CLI でこのルールを有効化するには、以下のように使用できます：

Config (.oxlintrc.json)

{
  "plugins": ["react"],
  "rules": {
    "react/no-string-refs": "error"
  }
}

CLI

oxlint --deny react/no-string-refs --react-plugin

参照

• ルールのソース