javascript - 在 React 组件之上声明通用实用程序函数与将函数声明为组件的一部分

Question

在 React 组件之上声明函数与将函数声明为组件的一部分之间有什么区别。

在getDisplayOptions组件本身中。

class PageShoppingChannel extends React.Component {
  getDisplayOptions = (providers) => {
    const options = []
    const { isFaeSet } = this.props

    providers.forEach((item) => {
      // code here 
    })
    return options
  }


  render() {
    return (
      <Wrapper>
        <TempIllsWithInfo illsType='Orders [Red]' infoBloc={infoBlock} />
        <hr className='row-spacing--sm' />
        {this.getDisplayOptions(this.props.providers)}
      </Wrapper>
    )
  }
}

在getDisplayOptions组件之前。

getDisplayOptions = (providers) => {
  const options = []

  providers.forEach((item) => {
      // code here 
  })
  return options
}

class PageShoppingChannel extends React.Component {
  


  render() {
    return (
      <Wrapper>
        <TempIllsWithInfo illsType='Orders [Red]' infoBloc={infoBlock} />
        <hr className='row-spacing--sm' />
        {getDisplayOptions(this.props.providers)}
      </Wrapper>
    )
  }
}

我相信在前一种情况下，该功能会附加到prototypeof PageShoppingChannels。这两种方法的优点和缺点是什么。我相信这是一个 javascript 问题，但我的例子是反应，所以请原谅我在这里将两者混为一谈。

标签： javascriptreactjs