eslinting with 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;
gives the error
5:1 error Component should be written as a pure function react/prefer-stateless-function
I have tried
function render(){}
and
render: function() {}
but didn't succeed
Using the docs from https://facebook.github.io/react/docs/reusable-components.html#stateless-functions , your code sample would be converted to:
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;
Note that this updated code sample will break some other airbnb eslinting rules but those should be self-explanatory. Just posting this as a template to follow. The docs on this subject are very direct so make sure you give those a good review.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.