在类之外的函数或变量

Question

我正在探索反应，并且看到了这段代码。

const renderLine = (user, key) => <li key={key}><b>{key}</b>: {user[key]}</li>

export default class App extends Component {
  ...
  ...
  render () {
    return (
      <div className='App'>
          {Object.keys(user).map(key => renderLine(user, key))}
      </div>
    )
  }
}

为什么renderLine在App类之外？这种模式的意图是什么？通常我会放在一个类中并像this.renderLine()

Answer 1

你可以把它放在课堂上，当然，没有任何问题。将它暴露在类之外使其成为可以在类/组件范围之外使用的辅助函数。

你甚至可以将这些类型的代码组织到这个 js 文件之外的辅助函数中，例如 UIHelper.js：

//UIHelper.js
const renderLine = (user, key) => <li key={key}><b>{key}</b>: {user[key]}

const UIHelper = {
    renderLabel: renderLabel,        //Other helper functions
    renderLine: renderLine,          //<----------Export this
    renderDateTime: renderDateTime,  //Other helper functions
    ...
}
export default UIHelper;

用法：

//Other.js
import UIHelper from '../what/ever/path/UIHelper'

render (){
...
   {UIHelper.renderLine()}
...
}