← Back to rules

react/require-render-return Nursery

何を実行するか

render 関数内の戻り値を返す場合に、ES5 または ES2015 クラスを使用することを強制します。

このルールは関数型コンポーネントでは関係がないため、現代的な React プロジェクトでは無効化できる可能性があります。

なぜ悪いのか

コンポーネントの render メソッドを記述する際に、戻り値として JSX 内容を返すのを忘れてしまうのは簡単です。このルールは、return 文が存在しない場合に警告します。

例

このルールに対する不正なコードの例：

var Hello = createReactClass({
  render() {
    <div>Hello</div>;
  },
});

class Hello extends React.Component {
  render() {
    <div>Hello</div>;
  }
}

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

var Hello = createReactClass({
  render() {
    return <div>Hello</div>;
  },
});

class Hello extends React.Component {
  render() {
    return <div>Hello</div>;
  }
}

使い方

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

Config (.oxlintrc.json)

{
  "plugins": ["react"],
  "rules": {
    "react/require-render-return": "error"
  }
}

CLI

oxlint --deny react/require-render-return --react-plugin

参照

• ルールのソース