React：将带有给定参数的函数传递给 child

Question

我的目标是在 parent 组件中创建一个函数并将其传递给 child 组件，这样我就可以将状态从 child 更新到 parent。

但是，我想在 parent 组件中确定一个参数。

有什么办法吗？请参阅下面的示例。

假设我有以下代码

const Parent = ( props ) => {
    
    const [counter, setCounter] = useState(0);

    function updateFunc(type, id) {
        let obj = {type : "", id : id}
        if (type == "red"){
            obj.type = 'RED_FLAG';
        } else {
            obj.type = 'ELSE_FLAG';
        }
    return obj;
    }
    
    return (
        <>
            // HERE I WOULD LIKE TO PASS ALSO A "RED" ARGUMENT -> IS THIS POSSIBLE?
            <Child update = {update}
        </>
    )

}

Answer 1

您可以通过添加一个函数来实现：

<Child update={(id) => {
  return updateFunc("red", id);
}}/>

Answer 2

有一种技术叫做currying。例如，您可以有一个将类型作为参数的函数和 returns 一个将 id 作为参数的函数，最终 returns 对象。

const Parent = (props) => {

    const [counter, setCounter] = useState(0);

    function updateFunc(type) {
        return (id) => {
            let obj = { type: "", id: id }
            if (type == "red") {
                obj.type = 'RED_FLAG';
            } else {
                obj.type = 'ELSE_FLAG';
            }
            return obj;
        }
    }

    return (
        <>
            <Child update={update("red")}
        </>
    )

}

React：将带有给定参数的函数传递给 child

React: Pass function with a given argument to child

javascript

components

reactjs