如何在 React 中将函数作为 props 传递

作者

如何在 React 中将函数作为 props 传递

How to pass a Function as props in React

在 React 中将函数作为 props 传递：

  1. 在父组件中定义函数。
  2. 将它作为 prop 传递给子组件，例如
    <Child handleClick={handleClick} />.
  3. 使用子组件中的函数。
应用程序.js
import {useState} from 'react';

function Child({handleClick}) {
  return <button onClick={handleClick}>Increment</button>;
}

export default function App() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <div>
      <h2>Count is: {count}</h2>

      <Child handleClick={handleClick} />
    </div>
  );
}

反应传递函数作为道具

我们将函数作为 prop 传递给 React 中的子组件。

请注意，当将它作为 prop 传递时，我们没有调用该函数。传递对函数的引用非常重要，而不是调用函数的结果。

如果您传递调用该​​函数的结果，例如
handleClick={handleClick()}，那么它会在页面加载时立即被调用，这不是我们想要的。

如果要将参数传递给作为 prop 传递的函数，请使用内联箭头函数。

应用程序.js
import {useState} from 'react';

function Child({handleClick}) {
  return <button onClick={handleClick}>Increment</button>;
}

export default function App() {
  const [count, setCount] = useState(0);

  function handleClick(event, num) {
    setCount(count + num);
  }

  return (
    <div>
      <h2>Count is: {count}</h2>

      <Child handleClick={event => handleClick(event, 100)} />
    </div>
  );
}

将函数作为带有参数的道具传递

handleClick在将参数作为 prop 传递给Child组件时，我们将参数传递给函数。但是，请注意，我们仍然将函数作为 prop 传递，而不是调用函数的结果。

event您的用例可能不需要该参数。所有事件处理程序都以event对象作为第一个参数调用，因此我们必须将其传递给本例中的函数。

您还可以向作为 prop 传递给子组件的函数添加额外的功能。

应用程序.js
import {useState} from 'react';

function Child({handleClick}) {
  // 👇️ wrap passed in function
  function wrapHandleClick(event) {
    // 👉️ your logic before
    console.log('Child called handleClick');
    handleClick(event);

    // 👉️ your logic after
  }

  return <button onClick={wrapHandleClick}>Increment</button>;
}

export default function App() {
  const [count, setCount] = useState(0);

  function handleClick(event, num) {
    setCount(count + num);
  }

  return (
    <div>
      <h2>Count is: {count}</h2>

      <Child handleClick={event => handleClick(event, 100)} />
    </div>
  );
}

包装传递的函数

我们将函数包装handleClick到另一个函数中，我们可以在调用它之前或之后运行一些额外的逻辑。

当您必须等待 Promise 的返回值，或根据传递函数的返回值运行某些逻辑时，这很有用。

–

发表评论