web-dev-qa-db-ja.com

ESLint-コンポーネントは純粋な関数として記述する必要があります（react prefer / stateless function）

ESLintは、reactプロジェクトでこのエラーを表示しています。

ESLint-コンポーネントは純粋関数（react prefer/stateless関数）として記述される必要があります

コンポーネントの最初の行を指します。

export class myComponent extends React.Component {
render() {
    return (

      //stuff here

    );
  }
}

このエラーを取り除くにはどうすればよいですか？

javascriptreactjseslint
24
JakeBrown777

2つの選択肢。

警告を一時的に無効にする

（テストされていません。これを行う方法は複数あります。）

// eslint-disable-next-line react/prefer-stateless-function
export class myComponent extends React.Component {
  ...
}

純粋なステートレスコンポーネントを使用

戻り値はレンダリングされるものです（例えば、基本的にクラスベースのコンポーネントのrenderメソッドを書いています：

export const myComponent = () => {
  return (
    // JSX here
  )
}

（または、それがあなたのものなら、非ES6表記を使用してください。）

他のサポートロジックを持たないこのようなコンポーネントの場合、暗黙的なリターンを好みます。

export MyComponent = () =>
  <div>
    // Stuff here
  </div>

これは好みの問題です。ただし、React命名規則に従って、すべてのコンポーネントを大文字で開始する必要があります。

ESLintは、複数行のJSX式の周りに欠落しているかっこについて文句を言う場合があるため、そのルールを無効にするか、かっこを使用します。

小道具が必要な場合、それらは関数の引数として渡されます：

const MyComponent = (props) =>
  <div>
    <Something someProp={props.foo} />
  </div>

export MyComponent

また、便宜上、パラメーターを通常どおりに分解できます。

const MyComponent = ({ foo }) =>
  <div>
    <Something someProp={foo} />
  </div>

これにより、ローカル変数を使用している場合、暗黙的な戻り値が少し簡単になります。宣言しない限り、PropTypesがないことに関するESLint警告が表示されます。それはクラスではないので、クラスでstatic propTypesを単純に使用することはできないため、関数にアタッチする必要があります（多くの人がとにかく好みます）。

42
Dave Newton

コンポーネントをステートレス関数として記述します。

export myComponent = () => { //stuff here };

Reactには、実際には2つのスタイルの定義コンポーネントがあります。機能コンポーネント（小道具からReactコンポーネントへの単なる関数です）とクラスコンポーネントです。

それらの主な違いは、クラスコンポーネントにstateとcomponentDidMount、componentDidUpdateなどのライフサイクルメソッドを含めることができることです。

ライフサイクルメソッドの状態が不要な場合は常に、コンポーネントをステートレス関数として記述する必要があります。ステートレスコンポーネントは一般的に推論が容易だからです。

機能コンポーネントを作成するには、単一の引数を取る関数を作成します。この引数は、コンポーネントの小道具を受け取ります。したがって、this.propsを使用してコンポーネントの小道具にアクセスすることはありません。関数の引数を使用するだけです。

5
Pedro Castilho

propsに依存している場合、ステートレス関数を書き出さずにこのエラーを修正するより良い（多少議論の余地がある）方法があります- PureComponent を記述し、このeslintを使用するルール [ソース] ：

"react/prefer-stateless-function": [2, { "ignorePureComponents": true }],

上記のルールでは、次のスニペットが有効です（propsに依存するため）

class Foo extends React.PureComponent {
  render() {
    return <div>{this.props.foo}</div>;
  }
}

ReactチームはSFCを中心に最適化を構築する予定ですが、まだ最適化されていません。したがって、それが発生するまで、SFCsはPureComponentsを超える利点を提供しません。実際、無駄なレンダリングを防ぐことはできないため、わずかに悪化します。

3
Mrchief

このエラーは、クラスにライフサイクルメソッドまたはコンストラクターがない場合にのみ発生します。これを解決するには、lintプロパティを無効にするか、純粋関数として作成するか、クラスのコンストラクターを作成する必要があります。

1
subrat

次のようなconstructor（）を追加します。

exports class myComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  render() {
    return (
      <div>Hello</div>
    );
  }
}
1
1nstinct

Jsxテンプレートをレンダリングし、constructor(props)で状態を宣言しない場合は、コンポーネントをpropsの純粋な関数として記述し、classキーワードを使用して定義しないでください。

例.

export const myComponent = () => (
   // jsx goes here  
);
1
ndonolli
export class myComponent extends PureComponent {
  ...
}
0
Iryna Batvina
const myComponent = () => {
return (
  //stuff here

  );
};

export default myComponent;

そして、app.jsファイルでは、クラスの場合と同様にこのコンポーネントをインポートするだけです

import myComponent from './myComponent.js'

として呼び出す

<myComponent />

確実に機能します。

0
Anil Bomma