如何将函数作为 prop 传递给 React 函数组件？

Question

我正在尝试将函数作为道具传递下去。为什么这不起作用？

在Parent中：

const dummyProps = {
    label: "Text",
    increment: function() {
        console.log("+");
    },
};

function Parent() {
    return (
        <div>
            <Child {...dummyProps} />
        </div>
    );
}

在Child中：

function InputNumeric({ label, increment }) {
    return(
        <label>{label}</label>
        <button onClick={increment}>Click</button>
    )
}

Answer 1

在 React 中，您需要呈现单个父元素。在您的问题中，您忘记了将元素包装在子组件中。您可以用另一个元素或 React.Fragment 换行（shorthand 语法为 <> </>）

function InputNumeric({ label, increment }) {
    return(
        <>
          <label>{label}</label>
          <button onClick={increment}>Click</button>
        </>
    )
}

记住，

<div prop1={'asdf'}></div>

实际翻译成

React.createElement('div', {prop1: 'asdf'})

如何将函数作为 prop 传递给 React 函数组件？

How to pass a function as a prop to React function component?

reactjs

storybook