import { render } from "solid-js/web";
import { useContext, createContext } from "solid-js";
const FooContext = createContext({ context: "not found" });
const FooHOC = (C: any) => (props: any) => {
return (
<FooContext.Provider value={props.name}>
<C {...props} />
</FooContext.Provider>
)
}
const C = () => {
console.log("C", useContext(FooContext));
const b1 = <B name={"B1"}/>;
const b2 = () => <B name={"B2"}/>;
return (
<A name={"A"}>
{b1}
{b2}
</A>
)
}
const B = (props: any) => {
console.log("B", props.name, useContext(FooContext));
return <div/>
};
const A = FooHOC((props: any) => {
console.log("A", useContext(FooContext))
return (
<div>
{props.children}
</div>
);
})
render(() => <C name={"C"} />, document.getElementById("app")!);`
import { render } from "solid-js/web";
import { useContext, createContext } from "solid-js";
const FooContext = createContext({ context: "not found" });
const FooHOC = (C: any) => (props: any) => {
return (
<FooContext.Provider value={props.name}>
<C {...props} />
</FooContext.Provider>
)
}
const C = () => {
console.log("C", useContext(FooContext));
const b1 = <B name={"B1"}/>;
const b2 = () => <B name={"B2"}/>;
return (
<A name={"A"}>
{b1}
{b2}
</A>
)
}
const B = (props: any) => {
console.log("B", props.name, useContext(FooContext));
return <div/>
};
const A = FooHOC((props: any) => {
console.log("A", useContext(FooContext))
return (
<div>
{props.children}
</div>
);
})
render(() => <C name={"C"} />, document.getElementById("app")!);`