ESlintでAirbnbのスタイルガイド使用時のReact Component

概要

  • stateless functional component じゃないとeslintで怒られたりしたので書き方をまとめて置く

error Component should be written as a pure function

  • stateの変更がない場合、コンポーネントは関数で定義しなければいけないらしい

stateless functional component

  • 関数で書く状態変化のないコンポーネント
  • 1
    2
    3
    const Hello = (props) => {
    return (<div>Hello, {props.name}</div>);
    }

eslint, airbnb styleguide で valid な component

  • ESlint で Air bnb の スタイルガイドを使った際、エラーの出ないコンポーネントの書き方

state less functional component

  • 状態を持たず、関数で記述されたコンポーネント
  • 1
    2
    3
    4
    5
    6
    7
    8
    9
    import React from 'react';

    const Hello = () => (
    <div>
    Hello
    </div>
    );

    export default Hello;

functional component

  • 関数で記述されたコンポーネント
  • 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    import React from 'react';
    import PropTypes from 'prop-types';

    const Hello = (props) => {
    const { id } = props;
    return (
    <div>
    Hello,
    {id}
    </div>
    );
    };

    Hello.propTypes = {
    id: PropTypes.string.isRequired,
    };

    export default Hello;

class component

  • 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    import React from 'react';

    export default class Hello extends React.Component {
    constructor(props) {
    super(props);
    this.state = {
    text: '',
    };
    }

    render() {
    return (
    <div>
    <input type="text" onChange={e => this.state({ text: e.targetValue })} />
    </div>
    );
    }
    }

参考