-
-
Save jeffhandley/0ebf0fd7f04b3b2613a72b2fe1054e45 to your computer and use it in GitHub Desktop.
// 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 }) | |
}} /> | |
); | |
} | |
}); |
That's correct. Given the scope of what you're doing, I think your method is fine; the component I created is more useful when you want to have more complicated UI in the placeholder slots. For example, if you wanted to do a localizable, Outlook-style recurrence picker of the form, "Every (second) (Tuesday) of every | 2 | months", where instead of my bad ascii art, you had interactive controls, the component that I built would be ideal.
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!
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.
@david-mitchell Sounds very interesting! So you end up creating an array of nodes where some nodes render as pure text and other nodes render as the nodes that were passed in as children?
Do you feel the string splitting is solid enough to be better than using
dangerouslySetInnerHTML
? Despite "dangerously," I think what I'm doing is actually safe.