Estoy tratando de reemplazar partes de una cadena con etiquetas JSX, así:

render: function() {
    result = this.props.text.replace(":",<div className="spacer"></div>);
    return (
         <div>        
             {result}
         <div>        
    );
}

Pero dado quethis.props.text esLorem : ipsum, en resultado de

<div>
    Lorem [object Object] ipsum.
</div>

¿Hay alguna manera de resolver esta u otra forma de reemplazar partes de una cadena con etiquetas JSX?