'컴포넌트는 eslint-react에서 순수한 함수 오류로서 작성되어야 한다'는 것을 어떻게 해결할 것인가?

'컴포넌트는 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.

그렇다면 위의 구성 요소를 순수한 기능으로 변경하는 방법은 무엇일까요?

도와주셔서 고마워요.

React 0.14는 순수 기능 구성 요소를 도입했습니다.

모든 상태 비저장 구성 요소에 대해 이 옵션을 사용하는 것이 좋습니다.

function Option({ onClick, option }) {
    return (
        <li onClick={onClick}>
            {option}
        </li>
    );
}

ES6에서는 다음과 같은 작업을 수행할 수 있습니다.

const Options = (props) => {

    const handleClickOption = () => {
        // some code
    }

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

Options.propTypes = {
    // validate props
};

export default Options;

스테이트리스 기능 컴포넌트는 이러한 컴포넌트와 관련된 향후 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"
}

다음으로 ES6 스타일의 컴포넌트를 eslint enable로 쓸 수 있습니다.

import React, { Component } from 'react';

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

export default Home;

즉, 구성 없이 반응에서 상태 저장 구성 요소를 선언합니다.시나리오는 다음과 같습니다.

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>
      )
   }
}

저도 비슷한 문제가 있어요.패스된 클릭 기능 내의 컴포넌트별 소품 호출 방법을 알고 있는 사람이 있습니까?

예.

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>
  );
}

언급URL : https://stackoverflow.com/questions/35839184/how-to-solve-the-component-should-be-written-as-a-pure-function-error-in-esl