javascript - this 在 render() 中的一个函数中

Question

我知道how to handle this inside a function ，但就我而言，这些解决方案均无效，我仍然得到

this is undefined

问题是我在 render() 方法中有一个函数，但我不知道如何处理它。

这是我的代码的一部分

class Pagination extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
         //states
    }
    this.changePage = this.changePage.bind(this);
  }

changePage (event) {
   // some codes
}

 render() {
     function PrevPage() {
      return (
        <li key="p-page" onClick={this.changePage}>
          <a href="#">&lt;</a>
        </li>
      )
     }
    return (
         <div>
           <PrevPage />
            ...
         </div>
     )
 }
}

我在这一行得到了错误

<li key="n-page" onClick={this.changePage}>

我试着把这一行放在构造函数中:

 this.PrevPage= this.PrevPage.bind(this);

但是 PrevPage 不被这个识别。

此外，如果我将 PervPage 转换为箭头函数:

PrevPage = () => {
  return (
    <li key="p-page" onClick={this.changePage}>
      <a href="#">&lt;</a>
    </li>
  )
}

我收到这个错误:

'PrevPage' is not defined no-undef

我知道我错过了一些东西，但我不知道是什么

Answer 1

为什么不直接删除渲染外的功能？一般来说，您希望保持 render 逻辑尽可能干净，您的 PrevPage 组件实际上可以只是一个普通方法。在 render 中定义一个子组件，然后立即返回它似乎有点多余。

class Pagination extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
         //states
    }
    this.changePage = this.changePage.bind(this);
    this.prevPage = this.prevPage.bind(this);
  }

changePage (event) {
   // some codes
}

prevPage() {
   return (
     <li key="p-page" onClick={this.changePage}>
        <a href="#">&lt;</a>
     </li>
   )
}

 render() {
    return (
         <div>
            {this.prevPage()}
            ...
         </div>
     )
 }
}

或者，如果您愿意，只需为 PrevPage 创建一个全新的组件，并将 changePage 处理程序作为 props 传递下去。 changeHandler 仍将绑定(bind)到 Pagination 组件上下文。

PrevPage.js

const PrevPage = (props) => {
   return (
     <li key="p-page" onClick={props.changePage}>
        <a href="#">&lt;</a>
     </li>
   )
}

export default PrevPage

分页.js

class Pagination extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
         //states
    }
    this.changePage = this.changePage.bind(this);
  }

changePage (event) {
   // some codes
}

 render() {
    return (
         <div>
            <PrevPage changePage={this.changePage}/>
         </div>
     )
 }
}