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

可重用是答案。把它放在你的班级，你不能在另一个组件中使用它。

在React中有两种主要类型的组件：有状态和无状态。您使用无状态组件来呈现不拥有其数据的小事物。 renderLine就是一个很好的例子：它只是渲染你给它的任何东西，一行。

Answer 2

你可以毫无问题地把它放在课堂上。将它暴露在类之外使它成为一个辅助函数，可以在类/组件的范围之外使用。

您甚至可以将这些类型的代码组织到此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()}
...
}

Answer 3

功能与无状态组件相同但是以这种方式编写它并不常见，因为映射函数中的组件需要key，但并不是每一行都需要显示键值。

＆＃13;

const renderLine = (user, key) => (<li key={key}><b>{key}</b>:{user}</li>);

const RenderStatelessLine = props => (<li>{props.user}</li>);

export default class App extends Component {
  render () {
    return (
      <div className='App'>
          {Object.keys(users).map(key => renderLine(users[key], key))}
          {Object.keys(users).map(key => <RenderStatelessLine user={users[key]} key={key} />)}
      </div>
    )
  }
}

＆＃13;

反应中一个类之外的函数或变量

3 个答案: