如何通过具有扩展操作符的组件传递函数?

Question

抱歉，这里是react的新手。我有一些困难，试图通过prop钻传递信息到父组件为了设置值到上下文API，所以我可以传递信息到另一个组件。

我有一个名为foodItem的数组，它通过onGetFood函数从App.js传递到下面的组件。我创建了另一个名为getFoodItemInfo的中间测试函数，将其传递给下一个组件ChildFoodItem。

//FoodList.jsx
function FoodItem ({foodItem}, {onGetFood}) {
function getFoodItemInfo (food) {
onGetFood();
console.log("FOOOD");
}
return (
<ChildFoodItem {...foodItem} **getFood={getFoodItemInfo}**/>
);
}
//ChildFoodItem.jsx
function ChildFoodItem (food, {getFood}) {

getFood();

return (
<p className="flex-container">
{/* First row - Macros */}
<p className='task flex-child'>
<Button onClick={(e) => getFood()} style={{font: "bold"}} variant="link">{food.description} </Button>
</p>
</p>
)
}

然而，当我试图将getFood传递给ChildFoodItem时，我得到的函数是未定义的?是否存在这样一条规则:如果你使用扩展运算符，你就不能对函数进行prop钻取?

Answer 1

您正在尝试解构prop参数，这是组件接收的第一个参数。通过指定多个参数(food, {getFood})，道具将在food中结束，并且任何其他参数将未定义。正确的语法应该是:

function ChildFoodItem ({ getFood, ...food })

这将从道具中取出getFood函数，并将其余的道具放入food变量中。

有关更多细节，请参阅对象解构中的"Rest"。"解构作业"一节文档。

Answer 2

Issue

React组件只接收一个参数，即props对象。对于function ChildFoodItem (food, {getFood})，您试图从未定义的参数中解构getFood。您命名为food的道具对象。 <标题>

解决方案如果props被传递为:

<ChildFoodItem {...foodItem} getFood={getFoodItemInfo} />

然后getFood可以显式地解构，而其余的food道具被扩展到一个名为food的变量(或任何其他有效的标识符)。

function ChildFoodItem ({ getFood, ...food }) {
getFood();
return (
<p className="flex-container">
{/* First row - Macros */}
<p className='task flex-child'>
<Button onClick={(e) => getFood()} style={{font: "bold"}} variant="link">{food.description} </Button>
</p>
</p>
)
}