Last active
July 20, 2016 13:45
-
-
Save jeffhandley/0ebf0fd7f04b3b2613a72b2fe1054e45 to your computer and use it in GitHub Desktop.
Is there a better way to build this React component other than using ReactDOMServer.renderToStaticMarkup and dangerouslySetInnerHTML?
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
// Returns a translated form of "Welcome back, <strong>Jeff</strong>. It's good to see you again." | |
// There are several messages that can be supplied and they can have different sentence structures | |
// Regardless of the message, the name needs to be wrapped in a <strong> tag | |
import React from 'react'; | |
import ReactDOMServer from 'react-dom/server'; | |
export default React.createClass({ | |
displayName: 'Greeting', | |
propTypes: { | |
formatMessage: React.PropTypes.func.isRequired, | |
message: React.PropTypes.string.isRequired, | |
name: React.PropTypes.string.isRequired | |
}, | |
render() { | |
const nameHtml = ReactDOMServer.renderToStaticMarkup( | |
<strong>{ this.props.name }</strong> | |
); | |
return ( | |
<span dangerouslySetInnerHTML={{ __html: | |
this.props.formatMessage(this.props.message, { nameHtml }) | |
}} /> | |
); | |
} | |
}); |
It seems that GitHub doesn't send emails for mentions on gists…if you've got any more questions/ideas, feel free to find me on Twitter.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Ooh, interactive controls as the placeholders. That's cool, @david-mitchell!!
I'll keep that in mind. Splitting the string doesn't seem too terrible to gain that power.
Thanks!