Как получить строку в ReactIntl ​​2.0 без использования FormattedMessage

Question

Пожалуйста, исправьте меня, если я ошибаюсь, FormattedMessage в ReactIntl ​​возвращает строку, обернутую тегами span. В ReactIntl ​​1.2 у нас есть возможность использовать this.getIntlMessage('key') чтобы получить только часть строки.

Вот мой вопрос: есть ли эквивалент этого в ReactIntl ​​2.0? Мне известно, что строку можно получить с помощью шаблона Function-As-Child в FormattedMessage как

<FormattedMessage id="placeholder">
    {(formattedValue)=>(
        <MyComponent ref="mycomponent" placeholder={formattedValue}/>
    )}
</FormattedMessage>

Тем не менее, это испортило 'ref' в моем компоненте, и я не могу получить доступ к компоненту с помощью this.refs.mycomponent больше

Answer 1

Хорошо, для этого есть обходной путь. Я могу добавить ReactIntl в качестве контекста в компоненте следующим образом:

contextTypes: {
    intl: React.PropTypes.object.isRequired,
},

Затем при попытке извлечь строку сообщения и использовать ее, например, в качестве заполнителя, я могу это сделать.

<MyComponent ref="mycomponent" placeholder={this.context.intl.messages.placeholder}/>

Answer 2

Лучше решить placeholder проблема.

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

Answer 3

Вы можете легко вернуть строку, используя объект intl, предоставленный реагировать-intl.

Вот как вы используете объект int внутри класса реакции гораздо проще.

примечание: компонент рендеринга (основной компонент) должен переноситься с помощью IntlProvider

class MySubComponent extends React.Component{
  {/*....*/}

  render(){
    return(
     <div>
        <input type="text" placeholder = {this.context.intl.formatMessage({id:"your_id", defaultMessage: "your default message"})}
     </div>

    )
  }
   }
MySubComponent.contextTypes ={
 intl:React.PropTypes.object.isRequired
}

Определив contextTypes, вы сможете использовать объект intl, который является пропеллером типа контекста. Смотрите контекст реакции для более подробной информации.

Answer 4

Если вы используете функциональный компонент, вы можете использовать useIntl() крючок, чтобы получить intl объект и получите сообщение как string сниппет кода ниже.

      import {IntlProvider, useIntl} from 'react-intl';

export function MyFunctionalComponent() {
    const intl = useIntl();
    return (
        <div>
            <p>{intl.formatMessage({id: "MyKey"})}</p>
        </div>
    )
}

Примечание. Родительский компонент должен быть обернут вокруг </IntlProvider> провайдер.

Answer 5

Это то, что я заканчиваю. Я добавил центральную функцию справки, которая извлекает обычный текст.

      import { useIntl } from 'react-intl';

export const GetTranslateText = (textId) => {
  const intl = useIntl();
  const plainText = intl.formatMessage({ id: textId });

  return plainText;
};

Затем он отлично работает, чтобы просто получить текст в коде или компоненте.

      import { GetTranslateText } from '/utils/IntlHelpers';
.
.
 <input type="text" placeholder={GetTranslateText('your.text.id')} /> 
.
.

Answer 6

Я решил эту проблему с помощью React рендеринга реквизита.

Я создал пакет npm, который его реализует: http://g14n.info/react-intl-inject/

Это такой компонент

import { injectIntl } from 'react-intl'

export default function reactIntlInject ({ children, ...props }) {
  if (typeof children === 'function') {
    return (
      children(props)
    )
  } else {
    return null
  }
}

И вы можете использовать его для упаковки компонентов, которые, например, содержат реквизиты, которые вы хотите перевести, например

import React, { Component } from 'react'
// Import the package I created, available on npm with MIT license....
import InjectIntl from 'react-intl-inject'
// ...or copy the code above in a file in your project and import it, somethong like
// import InjectIntl from './path/to/my/render/prop/component'

class MyComponent extends Component {
  render () {
    return (
      <InjectIntl>
        {({ intl }) => (
          <button
            type='submit'
            value={intl.formatMessage({ id: 'enter.submit' })}
          />
        )}
      </InjectIntl>
    )
  }
}

export default injectIntl(reactIntlInject)