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

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

你的想法很好，但具体实现有两个问题:

1. function 是 JavaScript 中的关键字，因此不要将其用作标识符。
2. onClick={foo(bar)} 表示“在渲染时调用 foo(bar)，然后将该调用的结果作为点击处理程序。您可能想要 onClick={() => foo(bar)}，意思是“当元素被点击时调用 foo(bar)”。