eslint реагирует с Airbnb

Question

eslinting с Airbnb

import React from 'react'; 
import TopBar from './topBar'; 
import Content from './content'; 

class App extends React.Component { 
    render() { 
    return (
     <div className="app"> 
     <TopBar /> 
     <Content /> 
     </div> 
    ); 
    } 
} 

export default App; 

дает ошибку

5:1 error Component should be written as a pure function react/prefer-stateless-function 

Я Пытался

function render(){} 

и

render: function() {} 

но не удалось

Пожалуйста, помогите мне

Answer 1

Используя документы из https://facebook.github.io/react/docs/reusable-components.html#stateless-functions, ваш пример кода будет преобразован:

import React from 'react'; 
import TopBar from './topBar'; 
import Content from './content'; 

function App (props) { 
    return (
    <div className="app"> 
     <TopBar /> 
     <Content /> 
    </div> 
); 
} 

export default App; 

Обратите внимание, что этот обновленный пример кода сломается какой-нибудь другой Airbnb но они должны быть понятны. Просто опубликуйте это как шаблон для подражания. Документы по этому вопросу очень прямые, поэтому убедитесь, что вы даете им хороший обзор.