-
-
Save whoisryosuke/0fcb09e652e9d1bea09493b2614fc06c to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * In our app, we have a few middleware that generate a string of HTML. | |
| * On occassion it's fine to just use dangerouslySetInnerHTML directly for | |
| * those, but that requires that you have a host node for the innerHTML. | |
| * | |
| * In certain scenarios (like tags in <head />), there's HTML that we need | |
| * to insert directly where it is. This component enables that because | |
| * we replace <raw-text> and </raw-text> with empty strings. Effectively | |
| * making whatever's between <raw-text> and </raw-text> inlined in place. | |
| * | |
| * This is not something you should typically use, but it can be useful | |
| * on occassion. | |
| */ | |
| function RawText({ children }) { | |
| return <raw-text dangerouslySetInnerHTML={{ __html: children }} /> | |
| } | |
| function App(props) { | |
| return ( | |
| <html> | |
| <head> | |
| <RawText>{props.marketingAssets.headHTML}</RawText> | |
| </head> | |
| <body>{`... etc...`}</body> | |
| </html> | |
| ) | |
| } | |
| function renderApp(props) { | |
| return ` | |
| <!DOCTYPE html> | |
| ${ReactDOMServer.renderToStaticMarkup(<App {...props} />).replace( | |
| /<\/?raw-text>/g, | |
| '', | |
| )} | |
| ` | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment