reactjs - node - react react intl

React-Intl Cómo usar FormattedMessage en el marcador de posición de entrada

Question

No estoy seguro de cómo obtener los valores de

<FormattedMessage {...messages.placeholderIntlText} />

en un formato de marcador de posición como entrada:

<input placeholder={<FormattedMessage {...messages.placeholderIntlText} />} />

ya que devolvería [Objeto objeto] en el marcador de posición real. ¿Hay una manera de obtener el valor correcto real?

Answer 1

En mi caso, tenía la aplicación completa en un solo archivo, por lo que usar la export no funcionaría. Este utiliza la estructura de clase normal para que pueda usar el estado y otras funciones de React si es necesario.

import React from ''react'';
import { injectIntl, intlShape, defineMessages } from ''react-intl'';

const messages = defineMessages({
  placeholder: {
    id: ''myPlaceholderText'',
    defaultMessage: ''{text} and static text'',
  },
});

const ComponentWithInput = ({ intl, placeholderText }) => {
  return (
    <input
      placeholder={ intl.formatMessage(messages.placeholder, { text: placeholderText }) }
    />
  );
};

ComponentWithInput.propTypes = {
  intl: intlShape.isRequired
};

export default injectIntl(ComponentWithInput);

Aplicar utilizando la constante creada:

import ComponentWithInput from ''./component-with-input'';
...
render() {
  <ComponentWithInput placeholderText="foo" />
}
...

Answer 2

Está intentando convertir un componente React llamado FormattedMessage en una etiqueta de marcador de posición que espera una cadena.

En su lugar, debe crear una función llamada FormattedMessage que devuelva una cadena al marcador de posición.

function FormattedMessage(props) {
    ...
}

<input placeholder=`{$(FormattedMessage({...messages.placeholderIntlText})}` />

Answer 3

Los componentes <Formatted... /> React en react-intl deben utilizarse en escenarios de representación y no deben utilizarse en marcadores de posición, texto alternativo, etc. Representan HTML, no texto simple, que no es útil en tu escenario

En su lugar, react-intl proporciona una API de nivel inferior por exactamente este mismo motivo. Los componentes de representación en sí mismos utilizan esta API bajo el capó para dar formato a los valores en HTML. Es probable que su escenario requiera que use la API formatMessage(...) nivel inferior.

Debe inyectar el objeto intl en su componente utilizando el HOC injectIntl y luego formatear el mensaje a través de la API.

Ejemplo:

import React from ''react'';
import { injectIntl, intlShape } from ''react-intl'';

const ChildComponent = ({ intl }) => {
  const placeholder = intl.formatMessage({id: ''messageId''});
  return(
     <input placeholder={placeholder} />
  );
}

ChildComponent.propTypes = {
  intl: intlShape.isRequired
}

export default injectIntl(ChildComponent);

Tenga en cuenta que estoy usando algunas características de ES6 aquí, así que adapte de acuerdo a su configuración.

Answer 4

Me gusta esto:

import React, {PropTypes} from ''react'';
import { injectIntl, FormattedMessage } from ''react-intl'';
 
/**
* {
* "hello": "Hello",
* "world": "World"
* }
*/
 
// pure function
const PureFunciton = injectIntl(({ intl }) => {
return (
  <div>
    <p>{intl.formatMessage({ id: ''hello'' })}</p>
    <p><FormattedMessage id="world" /></p>
  </div>
)
});
 
// class Component
class componentName extends Component {
  handleStr = () => {
    // return ''Hello'';
    const { intl } = this.props;
    return intl.formatMessage({ id: ''hello'' })
  }
  render() {
    return (
      <div>
        <p>{this.handleStr()}</p>
        <p><FormattedMessage id="world" /></p>
      </div>
    );
  }
}
 
export default injectIntl(connect(componentName));

Answer 5

Sobre la base de la wiki de int intl, la implementación de un cuadro de entrada con un marcador de posición traducible se verá así:

class nameInputOrig extends React.Component {
  render () {
    const {formatMessage} = this.props.intl;
    return (
        <input type="text" placeholder={formatMessage({id:"placeholderIntlText"})} />
    );
  }
}

const nameInput = injectIntl(nameInputOrig);

y el uso de la misma:

class App extends React.Component {
    render () {
        <nameInput />
    }
}

La parte id: ''myPlaceholderText'', es necesaria para que babel-plugin-react-intl recopile los mensajes para su traducción.

Answer 6

• Puedes usar intl prop desde injectIntl HoC
• También puede proporcionar la función como componente hijo:

<FormattedMessage {...messages.placeholderIntlText}> {(msg) => (<input placeholder={msg} />)} </FormattedMessage>