Is it possible? Sure, but will it work? I don’t know…the inner components methods would have to be call from the outer components methods…sounds tricky. What seems even more tricky is how to handle the properties. Props from both components need to show up in the Designer editor panel as the outer components props then parsed(?) and passed to the inner component(?). What do you think? Is it done this way? Can it be done? Inquiring minds would like to know : )
Thank you.
Do you need to expose both the inner as a usable component, and this wrapper?
One option might be to make the inner component a ‘pure’ React component (not a Perspective component that expects ComponentProps), and then have a ‘wrapper’ Perspective component for the ‘inner standalone’ and a Perspective component for the ‘outer’ layer. The ‘pure’ component would expect a certain property configuration, and each wrapper would just be responsible for wrapping their props into the expected configuration.
Hi Paul,
Do you mean expose the inner components properties to the Property Editor in Designer? If yes then yes, properties for all inner components and the outer component need to be exposed in Designer so I can bind them to tags.
Regardless how I do it, I still have the problem of instantiating the inner component, I think I'll have the same issue making a pure React Component as I do a Perspective Component is the pers comp extends the React comp. I'm passing the type but getting error Expected 0 type arguments, but got 1..
export class ValveBasic extends Component<ComponentProps<ValveBasicProps>, any> {
jhg = new MyImportNamespace.MyPersComp<MyImportNamespace.MyPersCompImageProps>();
A colleague said it was possible to put my Perspective component directly into the return ( statement of the render() { method as React HTML element...something like this (below) but I get the same error.
render() {
// Stuff and more stuff.
return (
<div {...emit({ classes: ['valve-basic-component'] })}>
<MyImportNamespace.MyPersComp<ComponentProps<MyImportNamespace.MyPersCompProps>()/>
// Yadda yadda yadda
...reading this about React elements from Components: https://reactjs.org/docs/components-and-props.html
That’s not exactly what I’m describing. Obviously I don’t know exactly what your purpose is or what restriction you may have, but the idea is to separate the rendering logic of a Valve (or whatever) from the outer component(s) that may need to display one.
Something more like this:
interface ValveProps {
}
class ValveRender extends Component<ValveProps, any> {
render() {
// whatever structure makes sense for the inner
}
}
interface ValveBasicProps extends ValveProps {
}
export class ValveBasic extends Component<ComponentProps<ValveBasicProps>, any> {
render() {
return </ValveRender>
}
}
interface ValveWrapperProps extends ValveBasicProps {
}
export class ValveWrapper extends Component<ComponentProps<ValveWrapperProps>, any> {
render() {
return <Wrapper>
</ValveRender>
</Wrapper>
}
}
Ah, okay, I understand now. Thank you Paul.
Ups i wrote this yesterday but didnt press send xD
Sure possible,
you will have to pass the arguments thourgh the layers tho yea, unless you use reactmemory or something but that is even trickier to use if you have no experience with it.
thats why i make the tree.writes also a prop function. like i said in one of your previous questions. that way you can easily pass them through the next component soo they can trigger the write more easily^^
import customSubComponent1 from "../customSubComponent1
import customSubComponent2 from "../customSubComponent2
export class customComponent extends Component ...
props
...
return
<div
mainProp:{mainProp}>
<customSubComponent1
subProp1:{subProp1}
setSubProp1:{setSubProp1}
/>
<customSubComponent2
subProp2:{subProp2}
/>
</div>
@PGriffith
@victordcq
Thank you both. I’ve been struggling with this since I first made this post and finally got it working today. React is tricky. TypeScript too…a thousand was to do something.
2 Likes