javascript - 这在render()内部的函数中

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


  这是未定义的


问题是我在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'no-undef


我知道我缺少东西，但我无法弄清楚

最佳答案

为什么不只删除渲染器之外的功能？一般来说，您希望保持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仍将绑定到Pagination组件上下文。

PrevPage.js

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

export default PrevPage

Pagination.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>
     )
 }
}