Question

import ImageGallery from 'react-image-gallery'

    methodOne(){
       return (<div><ImageGallery /></div>)
    }

    methodTwo(){
       return (<h1>{this.methodOne()}</h1>)
    }

    render() {
       return(
         <AnotherCommonComponent methodTwo={this.methodTwo} />
       )
    }

当我尝试将methodTwo作为prop传递给另一个组件时，我得到了undeO的方法。奇怪的是，当我直接渲染时，我可以使用methodOne工作

render() {
       return(
         <methodTow />
       )
    }

这是因为this问题吗？我甚至试过

 methodOne = () => {
       return (<h1>h1 here</h1>)
    }

没有任何效果。

Answer 1

语法错误，将其更改为下面提到的代码。

＆＃13;

render() {
       return(
         {this.props.methodTwo()}
       )
    }

＆＃13;

Answer 2

您必须将此运算符绑定到函数。你可以在构造函数

中做到这一点

＆＃13;

....

constructor(props) {
  super(props);
  
  this.methodOne = this.methodOne.bind(this);
  this.methodTwo = this.methodTwo.bind(this);
}

methodOne(){
   return (<h1>h1 here</h1>)
}

methodTwo(){
   return (<h1>{this.methodOne()}</h1>)
}

render() {
   return(
     <AnotherCommonComponent methodTwo={this.methodTwo} />
   )
}

＆＃13;

Answer 3

methodOne(){
  return (<h1>h1 here</h1>)
 }

  methodTwo(){
    return (<h1>{this.methodOne()}</h1>)
 }

render() {
  return(
    <AnotherCommonComponent methodTwo={this.methodTwo.bind(this)} />
  )
 }

您需要将此绑定到 this.methodTwo 以访问AnotherCommonComponent中的方法1。希望这有助于

作为道具的反应传递方法未定义另一种方法

3 个答案: