Javascript 这是render（）中的函数_Javascript_Reactjs_Ecmascript 6

Javascript 这是render（）中的函数

javascript reactjs ecmascript-6

Javascript 这是render（）中的函数,javascript,reactjs,ecmascript-6,Javascript,Reactjs,Ecmascript 6,我知道，但在我的情况下，这些解决方案都不起作用，我仍然得到了解决这是未定义的问题是我在render（）方法中有一个函数，我不知道如何处理它这是我代码的一部分 class Pagination extends React.Component { constructor(props) { super(props); this.state = { //states } this.changePage = this.changePage.bin

我知道，但在我的情况下，这些解决方案都不起作用，我仍然得到了解决

这是未定义的

问题是我在

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

但是，

PrevPage

不能被识别

如果我将

PervPage

转换为箭头功能：

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

PrevPage=（）=>{
返回(


)
}

我得到这个错误：

未定义“PrevPage”无未定义

我知道我错过了一些东西，但我不知道该怎么做

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

this.changePage（）}>

您有多种选择：

绑定

PrevPage

内部

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


您必须将函数绑定到constructor，并将li标签上的函数作为箭头函数调用，还必须将PrevPage函数置于渲染函数外部，如下所示：
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>
    )
}

类分页扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
//州
}
this.changePage=this.changePage.bind（this）；
this.PrevPage=this.PrevPage.bind（this）；
}
更改页面（事件）{
//一些代码
}
前页（）{
返回(


)
}
render（）{
返回(
{this.PrevPage（）}
...
)
}

}
希望它有帮助
您的PrevPage
应该是一个单独的组件。在渲染函数中定义新组件不是一个好模式
您可以将其定义为功能组件：
const PrevPage => (props) {
    return (
        <li key="p-page" onClick={props.onChangePage}>
            <a href="#">&lt;</a>
        </li>
    )
}

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 onChangePage={this.changePage}/>
                ...
            </div>
        )
    }
}


const PrevPage=>（道具）{
返回(


)
}
类分页扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
//州
}
this.changePage=this.changePage.bind（this）；
}
更改页面（事件）{
//一些代码
}
render（）{
返回(
...
)
}
}
将其更改为箭头函数以获得下面代码中的“this”实例
changePage = (event) => {
   /* here you can access to "this" instance
   eg: this.setState({ pageName:'myPage' )}
  */
}

为什么不删除渲染外部的函数呢？一般来说，您希望保持呈现
逻辑尽可能干净，而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>
     )
 }
}

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

export default PrevPage

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

类分页扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
//州
}
this.changePage=this.changePage.bind（this）；
}
更改页面（事件）{
//一些代码
}
render（）{
返回(
)
}
}
您定义的是render
方法中的私有函数，因此在构造函数中绑定它的尝试无效，您有两种选择：
将PrevPage
函数转换为箭头函数
代码中有两个问题
您正在render方法中创建函数PrevPage，并将其作为组件调用，而必须将其作为函数调用
您没有将方法changePage正确绑定到OnClick
这就是我将如何编写这段代码
render() {
 function PrevPage() {
  return (
    <li key="p-page" onClick={ () => this.changePage }>
      <a href="#">&lt;</a>
    </li>
  )
 }
return (
     <div>
       {PrevPage()}
        ...
     </div>
 )

render（）{
函数PrevPage（）{
返回(
this.changePage}>

)
}
返回(
{PrevPage（）}
...
)

我建议您在render方法之外编写PrevPage函数，并像这样调用它
{this.PrevPage}
希望对您有所帮助。
使用的问题是它不是react组件。它是一个简单的本地函数，可以呈现，因此使用JSX表达式{PrevPage（）}，它将返回您返回的JSX。“'PrevPage'未定义无未定义”声明变量时，必须使用const
，let
或var
，这样才能起作用。@FelixKling你说得对。如果在arrow函数之前我没有漏掉一个“const”，我会在问问题之前解决这个问题。但问这个问题并查看答案教会了我新的东西！“您正在render方法中创建函数PrevPage并将其作为组件调用，而必须将其作为函数调用。”这不是真的。组件可以是类或函数。如果在render外部定义，则使用{this.PrevPage（）}
（）因为您希望它立即运行并返回jsx，否则它将不会运行，也不会返回jsx。“您没有将方法changePage正确绑定到OnClick。”OP是正确的。它在代码中是不正确的。它应该是OnClick={（e）=>this.changePage（e）}
，与OnClick={this.changePage}完全相同
。换句话说，您指出的两个问题根本不是问题。我的答案有很多很好的解决方案。我刚刚尝试了您的答案，它成功了。感谢您和其他人。我也想在提问之前做这件事，但我不知道如何在渲染中调用它。当然，这是一个非常受欢迎的问题。：。感谢acc接受我的请求，谢谢你的提问！我也从这次经历中学到了一些东西！changePage
不是问题的一部分。OP已经在构造函数中正确绑定了它。你认为这会解决问题吗？这已经错了，因为changePage
没有传递它所期望的事件对象。这是无效的JavaSccript语法。您不能将这样的函数定义放在类主体中。是的，您是对的，这是一个打字错误，忘记更改它onClick={（）=>这个。changePage（）}仍然是错误的。请使用OP使用的内容或传递
const PrevPage = (props) => {
   return (
     <li key="p-page" onClick={props.changePage}>
        <a href="#">&lt;</a>
     </li>
   )
}

export default PrevPage

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

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

  changePage(event) {
    // some codes
  }

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

    return (
      <div>
        <PrevPage />
        ...
      </div>
    );
  }
}


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

  changePage(event) {
    // some codes
  }

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

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


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