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

Question

这个问题可能已经存在，如果可以，请链接到该问题，我可以关闭它。无法找到答案或正确的措词。

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

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

让我们说onSort的合同是(a: Array<T>, b: Array<T>, id?: string)。我不确定函数约定应该如何，但我想成为将id传递到onSort的{​​{1}}的支持者。希望有道理。

我是否将其包装并寄出？但是那只会叫它不？

Answer 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的{​​{1}}属性与onSort的{​​{1}}具有相同的签名，则可以直接传递它。

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

Answer 2

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

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