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)函数从cmponent主体传递给此函数。

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

Answer 1

如果将组件移到render之外但仍在class component内，则需要使用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>
  }
}

Answer 2

简短版本：必须使用this关键字访问在类上下文中声明的任何方法/对象。因此，代码应该通过编写this.outerElementType而不是outerElementType来工作。

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

长版：ES6或Javascript通常具有预处理类和构造函数的方式。

考虑这个课程。

class Example {
    name = 'My Name';
    email = 'email@example.com'

    printHello = function(){
       console.log('hello')
    }
}

现在，变量name和email以及函数printHello都已直接在类的上下文中声明。 Javascript将按以下方式处理代码。

class Example {
    constructor(){
        name = 'My Name';
        email = 'email@example.com'

        printHello = function(){
           console.log('hello')
        }
    }
}

查看此示例，您可以看到这些对象被声明为类本身的属性和方法，而不是独立变量。因此，必须通过指定this来访问，以表示您正在调用属于该类的方法。

如果要在类之外声明对象或函数，则无需使用this就可以直接访问它们，因为它们不会被视为类的属性。

反应：如何将功能移到组件主体之外

2 个答案: