I often find that I want to have a react wrapping component around another component because of the nature of how React Hooks works with React Context. That is, if I have dependencies such that I want to use two different contexts (that are based on hooks) where one depends on the other I need to create a wrapping component as I'm showing below.
My question/problem is what to name the "inner" or "child" component. Both InnerComponent and ChildComponent don't feel like good choices. Suggestions?
const LayoutChild = ({ year, children, codeCampYears }) => {
const [state, send, service] = useMachine(svccUiMachine, codeCampYears)
const machine = [state, send, service];
return (
<SvccUiMachineContext.Provider value={machine}>
{children}
</SvccUiMachineContext.Provider>
);
};
const Layout = ({ year, children }) => {
const { data, loading } = useAuthInfo();
return (
<LayoutChild year={year} codeCampYears={codeCampYears}>
{children}
</LayoutChild>
);
};
export default Layout;
The above code is not exactly right, but the idea is that I'm exporting for consumption just the Layout
component, and it uses LayoutChild
and I'm not liking that name.
question from:
https://stackoverflow.com/questions/65904606/need-better-suggestion-for-naming-wrapping-components-in-react 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…