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 }) | |
}} /> | |
); | |
} | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.