Tengo un componente React que muestra una página con un título y algo de contenido.
El componente de Page representa el título aplicando diferentes estilos a todas las palabras (separadas por un espacio) en el título.
Funciona bien cuando el título es una cadena (puedo usar title.split(' ') ...), pero necesito usar un elemento JSX como título en alguna ocasión. Estoy usando React-Intl para la traducción y estoy usando <FormattedMessage id='...'/> para traducir el título.
¿Cómo puedo dividir el elemento FormattedMessage JSX en múltiples componentes de React para poder aplicar un estilo individual?
Aquí hay una caja de arena que ilustra el problema:
Presiona el botón "Cambiar a página..." para ver cómo debería verse.
Creo que no es posible dividir el componente FormattedMessage durante el procesamiento. Además, no tuve la suerte de renderizarlo (durante el renderizado...) para extraer la cadena de la salida.
Lo que podría intentar hacer para obtener una cadena y luego representarla como los otros títulos es tomar la id de children.props.id y resolverla en una cadena (usando los valores que pasa a IntlProvider si están disponibles en este punto .
Editar:
Mirándolo de nuevo, la forma correcta de hacerlo es aplicar el formato dentro de FormattedMessage así:
// App.js line 7 <FormattedMessage id="title.main"> {txt => <FormattedTitle>{txt}</FormattedTitle>} </FormattedMessage>De esta forma, los elementos secundarios ya estarán formateados y podrá utilizar el componente existente.