javascript - react : How to move function outside of component body

Question

我有一个位于 render(){} 中的函数

需要将该函数从渲染中移出。

但是当我将其移动到 class 主体内部时，调用该函数时会出现错误。

代码复制:

这是函数outherElementType

render() {
    const outerElementType = forwardRef((props, ref) => (
      <div ref={ref} onClick={(e) => this.handleSelectDoc(e)} {...props} role="button" />
    ));

这是传递outherElementType的地方:

         <AutoSizer>
            {({ height }) => (
              <List
                itemData={this.props.data}
                itemSize={150}
                outerElementType={outerElementType}
              >
                {NewsRenderer}
              </List>
            )}
          </AutoSizer>

我尝试将 outherElementType 移动到组件外部，但问题是这个 this.handleSelectDoc(e) 函数从组件主体传递到此函数。

    const outerElementType = forwardRef((props, ref) => (
      <div ref={ref} onClick={(e) => this.handleSelectDoc(e)} {...props} role="button" />
    ));

Answer 1

如果将组件移到 render 之外，但仍在 class 组件 内部，那么您需要使用 this 关键字来引用您创建的“新函数”

class MyComponent extends Component {

  outerElementType = forwardRef((props, ref) => (
    <div ref={ref} onClick={(e) => this.handleSelectDoc(e)} {...props} role="button" />
  ));

  render() {
    return <AutoSizer>
    {({ height }) => (
      <List
        itemData={this.props.data}
        itemSize={150}
        outerElementType={this.outerElementType}
      >
        {NewsRenderer}
      </List>
    )}
    </AutoSizer>
  }
}