This is HOW-TO implement functionality similar to ReactJS::Context, see Passing Data Deeply with Context.
Just to refresh, there are two types of components in Sciter’s Reactor,
functional components:
function FunctionComponent(props, kids ,parent) {}
class components:
class ClassComponent extends Element {
this(props, kids, parent) {}
render(props, kids, parent) {}
}
Note that parent parameter in these functions, that is real DOM element – parent element where this function or class component will appear or exists already.
All this gives us everything we need to implement that Passing Data Deeply with Context functionality with Sciter’s Reactor.
Let’s define this simple function:
function getContext(element, propName, defaultValue) {
if(!element) return defaultValue;
let v = element[propName];
return v ?? getContext(element.parentElement, propName, defaultValue);
}
As you see that function tries to get property propName on nearest DOM element in parent/child chain.
Having it we can define that Header component as:
export default function Heading(props, kids , parent) {
const level = getContext(parent,"level",1);
switch (level) {
case 1:
return <h1>{children}</h1>;
case 2:
return <h2>{children}</h2>;
case 3:
return <h3>{children}</h3>;
case 4:
return <h4>{children}</h4>;
case 5:
return <h5>{children}</h5>;
case 6:
return <h6>{children}</h6>;
default:
throw Error('Unknown level: ' + level);
}
}
And <Section> component will simply be this:
export default class Section extends Element {
level = 1; // serves as context variable
this(props, kids, parent) {
// get the level either from props.level or compute it in context
this.level = props.level ?? (getContext(parent,"level",0) + 1);
}
render(props, kids, parent) {
return <section>{kids}</section>;
}
}
As you see that is pretty simple to do with Reactor and does not require any additional functionality other than that getContext() helper function.
See full demo here.
UPDATE: if you need explicit <Context> component then check this discussion.
Build RSS channel
Sciter Twitter channel