Javascript 如何获取React组件的状态以实现全局保存按钮

我们开发了一个具有Reacts功能组件风格的可重用的表式组件。 该表使用React.useReducer保存、管理和验证其状态。 每行中都有几个输入字段、复选框和操作按钮，用于修改行/表状态

现在在GUI的其他地方有一个保存按钮（不是表的子项）。 如何从表中检索状态，以便将其（连同其他一些数据）发送到REST端点进行持久化

我们的实际解决方案是一个回调函数，它将被设置为表上的一个道具。 每次渲染后，从表组件内部调用此函数以发布当前状态的副本。 现在，这个回调函数的所有者获取并保存这个数据，以便它在Save按钮的作用域中可用

function ComponentWrapper(props)
{
    const dataRef = React.useRef(props.initialData);

    function onDataUpdate(newData) {
        dataRef.current = newDate;
    }
    
    function saveData() {
        // send dataRef.current to REST-Endpoint
    }
    
    return (
        <div>
            <MyTable onDataUpdate={onDataUpdate}></MyTable>
            ...
            <button onClick={(e) => sendData()} name="save">Save</button>
        </div>
    );
}
    
function MyTable(props)
{
    const [state, dispatch] = useReducer(..., props.initialData)

    // ... some code to dispatch state changing actions

    useEffect(() => {
        const copyOfState = { ...state }
        props.onDataUpdate(copyOfState);
    });
   
    return (
        // table markup goes here ...
    );
}

函数组件包装器（道具）
{
const dataRef=React.useRef（props.initialData）；
函数onDataUpdate（新数据）{
dataRef.current=新日期；
}
函数saveData（）{
//将dataRef.current发送到REST端点
}
返回(
...
sendData（）}name=“save”>保存
);
}
功能MyTable（道具）
{
const[state，dispatch]=useReducer（…，props.initialData）
//…一些用于分派状态更改操作的代码
useffect（（）=>{
const copyOfState={…state}
props.onDataUpdate（copyOfState）；
});
返回(
//表标记在这里。。。
);
}

这实际上是可行的，但是我们相信对于这样的用例可能有更好的方法。 我们不希望将状态从表提升到ComponentWrapper，因为表应该是可重用的，并且保存按钮可能位于GUI中完全不同的位置（例如工具栏或菜单中）

---

有什么想法吗？提前感谢。

如果您的表当前正在管理自己的状态，则需要提升该状态，或将其移动到某个全局存储中。正如您所说，将save函数作为回调从树上的某个组件传递给save按钮的父级组件将起作用

但是一个更优雅和用户友好的解决方案是要么使用一些，要么使用

使用context，save函数可以将该值传递给context对象，该对象可以在树的其他位置检索。有很多关于如何做到这一点的好文章-，和

---

Redux与此类似，它已经成为您最喜欢做的事情。您可以使用redux reducer将表数据保存到全局存储，然后您的“保存”按钮可以调用从存储中检索此数据并将其发送到REST端点，而不管其在树中与表的关系如何。在需要跨多个组件协调状态的大型应用程序中，这绝对是首选。

谢谢您的回答。真的没有比将状态提升到某个父级或应用程序的根组件更有效的官方方式了吗？因此，我们的表组件的每个使用者在充分使用它之前，都必须使用所需的reducer和action样板正确地设置react context provider/redux存储。我想知道，如果状态处理比仅仅存储一些值要复杂一些，那么如何构建一个可重用的组件呢？其实我对React不是很有经验，我很困惑。你说“我们桌子组件的每一位消费者”-你是说每一位家长？

MyTable

本身将使用上下文，或从redux存储中提取。通过这种方式，

MyTable

可以在许多地方重用。就您的问题而言，最“官方”的方式是上下文和redux，此时redux确实是一种行业标准。试试看，我想你们会喜欢的。我说的“我们表格组件的每个消费者”是指每个想在应用程序中集成组件的用户。我们将尝试使用React上下文+还原器。