Reactjs 反应JS语法并在JSX中调用函数

这不管用

import React , {useContext} from "react"
import {AppContext} from "../AppContext"

function CartItem({item}) {
 
    const {removeFromCart} = useContext(AppContext)

    return (
        <div className="cart-item">
            <i onClick={removeFromCart(item.id)} className="ri-delete-bin-line"></i>
            <img src={item.url} width="130px" />
            <p>$5.99</p>
        </div>
    )
}

export default CartItem

import React，{useContext}来自“React”
从“./AppContext”导入{AppContext}
函数CartItem（{item}）{
const{removeFromCart}=useContext（AppContext）
返回(
5.99美元

)
}
导出默认CartItem

但这是有效的

import React , {useContext} from "react"
import {AppContext} from "../AppContext"

function CartItem({item}) {
 
    const {removeFromCart} = useContext(AppContext)

    return (
        <div className="cart-item">
            <i onClick={()=>removeFromCart(item.id)} className="ri-delete-bin-line"></i>
            <img src={item.url} width="130px" />
            <p>$5.99</p>
        </div>
    )
}

export default CartItem

import React，{useContext}来自“React”
从“./AppContext”导入{AppContext}
函数CartItem（{item}）{
const{removeFromCart}=useContext（AppContext）
返回(
removeFromCart（item.id）}className=“ri delete bin line”>
5.99美元

)
}
导出默认CartItem

区别在于我们调用removeFromCart函数的方式，有人能解释一下发生这种情况的原因吗？提前谢谢

  <i onClick={removeFromCart(item.id)} className="ri-delete-bin-line"></i>

onClick需要函数reference，而不是在那里调用函数本身

<i onClick={()=>removeFromCart(item.id)} className="ri-delete-bin-line"></i>

removeFromCart（item.id）}className=“ri delete bin line”>

---

这里您定义了一个箭头函数，它被引用到onClick。这就行了。

我想你有点把JSX和HTML语法搞混了。在HTML中，您可以这样做

<div onlick="callThisFunction(1)"></div>

---

onClick

应分配一个函数引用。在示例1中，您正在渲染期间调用函数，并为返回值赋值

onClick

。这显然行不通。在2中，您正在传递一个对匿名箭头函数的引用，该函数将调用

removeFromCart

，因此它将工作。请注意函数引用和函数调用之间的区别。

<div onClick={getOnClickHandler()} />