Question

我正在尝试将功能作为道具传递。为什么这不起作用？

在父母中：

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

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

在儿童中：

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

Answer 1

在React中，您需要具有一个呈现的单个父元素。在您的问题中，您忘记将元素包装在子组件内。您可以使用其他元素或React.Fragment（简写语法为<> </>）包装

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

记住

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

实际上是翻译为

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

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

1 个答案: