eslint 與 airbnb 反應

Question

用 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 eslinting 規則，但這些規則應該是不言自明的。 只需將此作為模板發布即可。 關於此主題的文檔非常直接，因此請確保對這些文檔進行良好的評論。