Question

我不能使用React钩子。我有4个组成部分：

ComponentA
componentC
componentE
componentF

我需要直接从value将componentF传递到componentA，而不必从componentC和componentE传递。所有组件都在一棵树上。

    // componentA
    import React from 'react';
    import './App.css';
    import ComponentC from "./components/ComponentC";
    export const UserContext = React.useContext();
    function App() {
      return (
        <div className="App">
            <UserContext.Provider>
                <ComponentC  value={'My message'}/>
            </UserContext.Provider>

        </div>
      );
    }
    export default componentA;

    // componentF
    import React from 'react';
    import UserContext from '../App';
    function ComponentF() {
        return (
            <div>
                <UserContext.Consumer>
                    {
                        user => {
                            return (
                                <div>you are {user}</div>
                            )
                        }
                    }
                </UserContext.Consumer>
            </div>
        )
    }
    export default ComponentF;

尝试使用上下文时出现错误：

无效的挂钩调用。挂钩只能在功能组件的主体内部调用。

Answer 1

错误是您正在使用React.useContext()

您应该这样做：

export const UserContext = React.createContext();

要传递给组件A的子组件，您可以这样做：

<UserContext.Provider value={100}>
     <ComponentC  .../>
</UserContext.Provider>

您可以使用ComponentF组件主体内的React.useContext来获取值，而不是使用UserContext.Consumer。

// componentF
    import React from 'react';
    import {UserContext} from '../App';
    function ComponentF() {
      const value = React.useContext(UserContext);
        return (
            <div>
                ....
                {value} // which will be equal to 100
            </div>
        )
    }
    export default ComponentF;

无效的挂接调用。使用挂钩时，只能在函数组件的内部调用挂钩

1 个答案: