Question

我有一个React无状态功能组件。我想将增量传递给回调函数。

我必须将data.item.id传递给invokeFunction

const MyComponent = ({ data, invokeFunction }) => (
    <div>
        <a className="pdf-name" onClick={invokeFunction}>{data.item.extension.nameCode}</a>
</div>
)


hydratedata(arg){
console.log("arg", this is the data that is hydrating );
}

Answer 1

您可以通过匿名函数回调来调用它，例如：

const MyComponent = ({ data, invokeFunction }) => (
    <div>
        <a className="pdf-name" onClick={() => invokeFunction( data.item )}>{data.item.extension.nameCode}</a>
    </div>
);

或者根据@AndyRay的建议，您也可以使用绑定

const MyComponent = ({ data, invokeFunction }) => (
    <div>
        <a className="pdf-name" onClick={invokeFunction.bind( null, data.item )}>{data.item.extension.nameCode}</a>
    </div>
);

Binding使用预设的executioncontext创建一个函数，在这种情况下是第一个参数，所以它只需要调用函数

Answer 2

invokeFunction的上下文将存在于您作为MyComponent的prop传递的组件中。

要将任意数量的参数传递给回调函数，您可以创建一个包装函数，该函数使用值（存在于MyComponent的环境/闭包中）作为参数调用回调道具。

const MyComponent = ({ data, invokeFunction }) => {
  return (
    <div>
      <a
        className="pdf-name"
        onClick={wrapperFuncForArgs}
      >
        {data.item.extension.nameCode}
      </a>
    </div>
  );

  function wrapperFuncForArgs() {
    invokeFunction(data.item.id);
  }
};

将aurguments传递给回调函数

2 个答案: