如何将数据从孙组件传递到父组件。将更新后的状态附加到父组件中的子组件

Question

需要从孙组件更新父组件中的状态值。我的组件树结构是这样的。

我在 LeftFilter 组件（孙组件）中拥有可用的状态值。需要传递给 UserList （父组件）并在更改处理程序中过滤值并更新状态，然后将更新的状态值附加到 DataGrid 组件（UserList 组件内的子组件）

我的父组件是这样的：-

function UserList() {
/***/
return (
<>
<DataGrid>
</>

子组件

function DataGrid() {
/***/
return (
<>
<FilterModal>
</>

孙子

function FilterModal() {
/***/
return (
<>
<LeftFilter>
</>

需求/待办事项：- 我在 LeftFilter 中有一个状态值，我需要将该状态传递给 UserList，并且在更改处理程序中需要使用对象数组执行过滤操作并附加状态值。更新后的状态值将附加到父组件（UserList 组件）中

Answer 1

我看到你的要求了，你的主要问题只是数据传递的困难

这就是为什么 React 库中有 Context 的原因。

您可以使用这样的上下文来修复此问题。

数据上下文

const dataContext = createContext(your data);
export const useDataContext = () => useContext(dataContext);
export const DataContextProvider = ({ children }) => {
    const [data, setData] = useState(your data)
    const [filter, setFilter] = useState(your filter);

    const value = {
        data,
        filter,
        setData,
        setFilter
    }

    return <dataContext.Provider value={value}>
        {children}
    </dataContext.Provider>
}

当你用这个上下文包装你的应用程序组件时，

<DataContextProvider>
  <App />
</DataContextProvider>

您可以在任何组件中使用这些 setFilter、setData 函数。

const { setFilter, setData } = useDataContext();