将值传递给给定的函数 prop React答案

【问题标题】：Pass value to a given function prop React将值传递给给定的函数 prop React
【发布时间】：2020-03-04 17:47:14
【问题描述】：

这些问题可能已经存在，如果存在，请链接到它，我可以关闭它。找不到答案或正确的措辞。

我想将一个值传递给将发送到我的组件中的函数。例如，我想做与事件处理程序相同的事情。除了我想传递值（即事件 obj 或在我的情况下和 id）。

const Foo = ({ onSort }) => {
    return <Bar onSort={ onSort } />;

假设onSort 的合同是(a: Array<T>, b: Array<T>, id?: string)。我不确定函数合同应该是怎样的，但我想成为将id 传递给onSort 的人，该onSort 作为道具提供给Bar。希望这是有道理的。

我只是把它包装好然后寄进去吗？但那只会称之为不？

【问题讨论】：

【解决方案1】：

如果我理解你的话，你想向子组件发送一个函数，对吧？如我所见，您使用的是 Typescript，因此您需要创建组件 props 的接口以创建其签名。

interface BarProps {
 onSort: (id: string) => void
}

class Bar extends React.Component<BarProps> {}

然后，要使用您的组件，您需要向Bar 提供一个尊重接口的函数到onSort。

const Foo = ({ onSort }: {onSort: (param: string) => void}) => {
    return <Bar onSort={(id: string) => onSort(id) } />;
}

如果Foo的onSort属性和Bar的onSort有相同的签名，那么可以直接传递。

Ps：id 参数值，在这种情况下，必须始终来自 Bar 组件。

【讨论】：

【解决方案2】：

我们可以使用绑定或箭头函数将值传递给函数 prop，如下所述：https://stackoverflow.com/a/39226976/7245915

但是将值传递给函数 prop 的一个好方法是：https://stackoverflow.com/a/49337689/7245915

【讨论】：