web-dev-qa-db-ja.com

`コンポーネントをeslint-reactの純関数`エラーとして書くべきですか？

class Option extends React.Component {
  constructor(props) {
    super(props);
    this.handleClickOption = this.handleClickOption.bind(this);
  }
  handleClickOption() {
    // some code
  }
  render() {
    return (
      <li onClick={this.handleClickOption}>{this.props.option}</li>
    );
  }
}

eslint-config-airbnb を使用して上記のコードを確認すると、Component should be written as a pure functionのようなエラーメッセージが表示されます。

では、上記のコンポーネントを純粋な機能に変更する方法は？

ご協力いただきありがとうございます。

reactjseslint
50
Liu Dongyu

React 0.14は純粋な関数コンポーネントを導入しました。

これは、すべてのステートレスコンポーネントに推奨されるオプションです。

function Option({ onClick, option }) {
    return (
        <li onClick={onClick}>
            {option}
        </li>
    );
}
51
David L. Walsh

ES6では、次のようなことを実行できます。

const Options = (props) => {

    handleClickOption() {
        // some code
    }

    return (
        <li onClick={this.handleClickOption}>{this.props.option}</li>
    );
};

Options.propTypes = {
    // validate props
};

export default Options;
18
John Meyer

ステートレス機能コンポーネントは、これらのコンポーネントに固有の将来のReactパフォーマンス最適化の恩恵を受けるでしょう。コンポーネントを純粋な関数として記述する方法は次のとおりです。

const App = () => {
  return (
    <div>
      <h2 id="heading">Hello ReactJS </h2>
      <header />
    </div>
  );
};

export default App;

ただし、ES6スタイルでコンポーネントを記述したい場合でも、できますが、この場合はeslintエラーを削除する必要があります（eslintを使用している場合）。 .eslintrcファイルの次の変更

例えば：

"rules": {
    "react/prefer-stateless-function": "off"
}

次に、eslint enableを使用して記述できるES6スタイルコンポーネントを示します。

import React, { Component } from 'react';

class Home extends Component {
  render() {
    return (
      <header className="header">
        <h1>Home page</h1>
      </header>
    );
  }
}

export default Home;
15
vikram jeet singh

これは、コンストラクトなしのリアクションでステートフルコンポーネントを宣言することを意味します。シナリオは次のようになります

import React, { Component } from 'react';

class Something extends Component {
   render() {
      return (
        <div>Your classes</div>
      )
   }
}

上記のコードは間違っているので、正しいコードは次のようになります

class Something extends Component {

   constructor(props) {
      super(props);
      this.props = props;
   }

   render() {
      return (
        <div>Your classes</div>
      )
   }
}
6
Faris Rayhan

同様の問題があります。渡されたクリック関数内でコンポーネント固有のプロップを呼び出す方法を誰もが知っていますか？.

例えば。

function ElementRow({onClick, element, key}) {
  return (
    <tr key={key}>
      <td><a href="#" onClick={onClick}>Delete</a></td>
      <td>
        ...
      <td>{ element.first } { element.last }</td>
    </tr>
  );
}

onClick関数の内部には、element.idが必要です。 bind()を使用せずに解決策を探しています

React.createClassまたはextend React.Componentで動作させる方法を知っていますが、純粋な関数として書かれていません。

編集：解決策を見つけましたが、それがコード臭かどうかわかりません。 :)

function ElementRow({ onClick, element, key }) {
  const _onClick = (e) => {
    onClick(e, element.id);
  };

  return (
    <tr key={key}>
      <td><a href="#" onClick={_onClick}>Delete</a></td>
      <td>
        ...
      </td>
      <td>{ element.first } { element.last }</td>
    </tr>
  );
}
0
hyde