Monday, 30 May 2022

Compile a JSX string to a component on the fly

I've got a React application, in which I need to display an HTML Popup with some dynamic content generated by the server. This content also contains some JSX markup which I want to be rendered into real components.

<MyButton onClick={displayInfo}/>

...

async displayInfo() {
    let text = await fetch(...)  

    console.log(text) // "<SomeComp onClick={foo}><OtherComp..... etc

    let component = MAGIC(text)

    ReactDom.render(component, '#someDiv')
}

Due to how my server app is structured, ReactServerDOM und hydration is not an option.

Is there a way to implement this on the client side only?



from Compile a JSX string to a component on the fly

No comments:

Post a Comment