Is there a better way to build this React component other than using ReactDOMServer.renderToStaticMarkup and dangerouslySetInnerHTML?

Greeting.jsx

// 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.