Question

我想这样做，所以当我单击div时，它将在控制台中注销“ asdf”，但是我不确定这是否是作为props传递的方法的工作方式...

export class App extends Component {
   render() {
      func = (param) => {
         console.log(param);
      }

      return (
         <Card function={this.func} />
      )
    }
}

export class Card extends Component {
   render() {
      return(
         <div onClick={this.props.function("asdf")}> this is a div </div>
      )
   }
}

Answer 1

您的想法很好，但是该特定实现有两个问题：

function是JavaScript中的关键字，因此请勿将其用作标识符。
onClick={foo(bar)}的意思是“在渲染时调用foo(bar)，然后使该调用的结果成为点击处理程序。您可能想要onClick={() => foo(bar)}，这意味着“在调用时调用foo（bar）元素被点击”。

Answer 2

向Joseph提出了类似的建议，但也请注意，您想将函数拉到render()方法之外。如下所示：

export class App extends Component {
  printParam = param => {
    console.log(param);
  };

  render() {
    return <Card printParam={this.printParam} />;
  }
}

export class Card extends Component {
  render() {
    return (
      <button
        onClick={() => {
          this.props.printParam('asdf');
        }}>
        Click Me
      </button>
    );
  }
}

Answer 3

将您的自定义方法（即func）放入类范围，并将其从render()中删除。我之所以说要从render()方法中删除是因为当调用this.func时，它是指this指向类的属性和方法。由于将不会在类的全局范围内定义func属性或方法，因此它将返回undefined
您可以传递具有有意义名称的prop而不是function，因为函数可以像Joseph在回答中所说的那样在javascript中指示本机函数关键字。

您的代码可以更新为这种方式：

export class App extends Component {
    func = param => {
        console.log(param);
    };
    render() {
        return <Card myFunction={this.func} />;
    }
}

export class Card extends Component {
    render() {
        return (
            <div onClick={() => this.props.myFunction('asdf')}>
                {' '}
                this is a div{' '}
            </div>
        );
    }
}

是否可以将带有参数的函数作为prop传递，然后将该函数作为prop引用？

3 个答案: