React - Is there a way to get the value without messing up the component?

问题

I have a situation where I want to pass a value using Context + Hooks to another component, but the problem is that I do not need to import the component inside the provider to get the value in more understandable language, then imagine that I have two SideBarBlurChange components and SideBar inside the SideBarBlurChange component, I have a value in my case, this is a simple number that I want to pass inside the SideBar component, but the problem is that I don't want to import the SideBar inside the SideBarBlurChange component to get this value, because my entire project will collapse and get something like

As you can see, when importing the SideBar component inside the SideBarBlurChange component, the page collapsed, my question, how did you understand this, can I get a value called values inside the SideBar component, I'll lay out my code forever

SideBarBlurChange.jsx

export const BlurContext = createContext({
    BlurChangeValue: [],
});

export default function SideBarBlurChange(props) {

    const ls = parseInt(window.localStorage.getItem('values'));
    const [values, SetValues] = useState(ls ? [ls] : [20]);

    const SaveChanges = () => {
        localStorage.setItem('values', values);
    }

    return (
        <>
            <BlurContext.Provider value={{ BlurChangeValue: values }}>
                // jsx
            </BlurContext.Provider>
        </>
    );
}

SideBar.jsx

export default function SideBar(props) {

    const {SideBarValue, SideBarWallpaperValue} = React.useContext(CounterContext);

    const [SideBarTheme] = SideBarValue;
    const [SideBarBackground] = SideBarWallpaperValue;

    const {BlurChangeValue} = {...React.useContext(BlurContext)}
    const [count] = BlurChangeValue;

    return (
        <div className={"headline_sidebar_wrapper"}>
            <article className={`${Blur.glass} ${Blur.up}`}>
                <nav id="sidebar" className="sidebar-wrapper modal">
                    <p>{count}</p>
                    <div style={{backgroundImage: `url(${SideBarBackground})`}}>
                        <div style={{background: SideBarTheme, backdropFilter: "blur(60px)"}}
                             className={`${Blur.SideBar_Page_Content} ${Blur.SideBarContainer}`}>
                            <SideBarWrapper {...props} />
                            <div className="sidebar-menu">
                                <SideBarMenu path={props.match.path}/>
                            </div>
                        </div>
                    </div>
                </nav>
            </article>
        </div>
    );
}

I would also like to provide you with a picture, please note that inside the provider I get the value 73 but in the SideBar component I get undefined I am almost sure that this is due to the fact that I do not import anything inside the SideBarBlurChange question how to get or is there a way to get the value without component corruption? Thank you earlier for paying attention to my long question

来源：https://stackoverflow.com/questions/66028927/react-is-there-a-way-to-get-the-value-without-messing-up-the-component