javascript - React 中类外部的函数或变量

Question

我在探索 React 时，看到了这段代码。

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()}
...
}