Respect-Intl 입력 플레이스 홀더에서 Formatted Message를 사용하는 방법

Respect-Intl 입력 플레이스 홀더에서 Formatted Message를 사용하는 방법

값을 얻는 방법을 잘 모르겠습니다.

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

입력과 같은 자리 표시자 형식으로 변환합니다.

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

실제 자리 표시자에 [Object]가 반환되기 때문입니다.정확한 값을 구할 수 있는 방법이 있나요?

그<Formatted... />컴포넌트 반응react-intl는 렌더링 시나리오에서 사용하도록 의도되어 있으며 플레이스 홀더, 대체 텍스트 등에서는 사용되지 않습니다.일반 텍스트가 아닌 HTML을 렌더링하므로 시나리오에서는 유용하지 않습니다.

대신,react-intl는 같은 이유로 하위 레벨의 API를 제공합니다.렌더링 컴포넌트 자체는 이 API를 사용하여 값을 HTML로 포맷합니다.시나리오에서는 낮은 레벨을 사용해야 합니다.formatMessage(...)API.

주사해야 합니다.intl를 사용하여 컴포넌트에 오브젝트합니다.injectIntlHOC에서 API를 통해 메시지를 포맷합니다.

예:

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);

여기에서는 ES6 기능을 사용하고 있기 때문에, 설정에 따라서 조정해 주세요.

• 사용할 수 있습니다.intl에서 떠받치다.injectIntlHoC
• 하위 구성 요소로 기능을 제공할 수도 있습니다.

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

2019년 7월 react-intl 3 베타판에는 useIntl 훅이 포함되어 있어 번역이 용이합니다.

import React from 'react';
import {useIntl, FormattedDate} from 'react-intl';

const FunctionComponent: React.FC<{date: number | Date}> = ({date}) => {
  const intl = useIntl();
  return (
    <span title={intl.formatDate(date)}>
      <FormattedDate value={date} />
    </span>
  );
};

export default FunctionComponent;

그런 다음 API에서 제공하는 메서드를 사용하도록 사용자 지정 후크를 만들 수 있습니다.

import { useIntl } from 'react-intl'

export function useFormatMessage(messageId) {
  return useIntl().formatMessage({ id: messageId })
}

자세한 내용을 보려면 입력 자리 표시자

   <FormattedMessage id="yourid" defaultMessage="search">
    {placeholder=>  
        <Input placeholder={placeholder}/>
        }
    </FormattedMessage>

React version > = 16.8 이후로는 Intl 훅을 사용할 수 있습니다.

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

const FunctionComponent = () => {
    const intl = useIntl();
    const lang = "en";
    const messages = {
      en: {
        'placeholderMessageId': 'placeholder in english',
      },
      fr: {
        'placeholderMessageId': 'placeholder en fançais',
      }
    }
    return ( 
      <IntlProvider locale = {lang} messages = { messages[lang] } >
          <input placeholder = { intl.formatMessage({ id: 'placeholderMessageId' })}/> 
      </IntlProvider >
      );
    };

export default FunctionComponent;

react intl wiki에 따르면 변환 가능한 플레이스 홀더를 사용한 입력 상자의 구현은 다음과 같습니다.

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);

사용방법:

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

그id: 'myPlaceholderText',babel-syslog-intl이 변환용 메시지를 수집할 수 있도록 하려면 부품이 필요합니다.

저는 이 해결책을 제안하고 싶습니다.

import { useIntl } from "react-intl";

export default function MyComponent() {
  const intl = useIntl();

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

FormattedMessage라는 이름의 React 구성 요소를 문자열을 기다리는 자리 표시자 태그로 렌더링하려고 합니다.

대신 문자열을 플레이스 홀더로 반환하는 Formatted Message라는 함수를 만들어야 합니다.

function FormattedMessage(props) {
    ...
}

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

이 가능성을 생각해 보세요.

가장 심플한 솔루션

<IntlMessages id="category.name">
    {text => (
        <Input placeholder={text} />
    )}
</IntlMessages>

또는

저 같은 경우에는 앱 전체를 한 파일에 저장해놨기 때문에export안 먹혔어이것은 일반 클래스 구조를 사용하므로 필요에 따라 React의 상태 및 기타 기능을 사용할 수 있습니다.

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

const nameInput = injectIntl(nameInputOrig);

생성된 상수를 사용하여 적용합니다.

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

@gazdagerg의 답변을 시작으로, 저는 그의 코드를 다음과 같이 수정했습니다.

• 입력 위에 래퍼인 새로운 컴포넌트를 가진 모습
• local conf에서 문자열 ID를 수신하다
• ID를 기반으로 글로벌로케일 설정에 관한 문자열을 반환합니다.
• 문자열 ID가 설정되어 있지 않은 상황의 처리(이로 인해 예외와 페이지가 크래시됨)

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


    const InputWithPlaceholder = ({ intl, placeholder }) => {

      const messages = defineMessages({
        placeholder: {
          id: placeholder,
          defaultMessage: '',
        },
      });

      if(messages.placeholder.id) {
        return (
          <input placeholder={ intl.formatMessage(messages.placeholder) } />
        );
      } else {
        return (
          <input/>
        );
      }
    };

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

    export default injectIntl(InputWithPlaceholder);

다음 방법으로 다른 파일에서 사용할 수 있습니다.

1. 새 컴포넌트를 Import하다
2. 로케일 문자열의 ID를 매개 변수로 사용하여 사용합니다.

import InputWithIntlPlaceholder from 'your/path/to/component/InputWithIntlPlaceholder';

... more code here ...

<InputWithIntlPlaceholder placeholder="your.locale.string.id" />

다음과 같이 합니다.

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));

언급URL : https://stackoverflow.com/questions/39630620/react-intl-how-to-use-formattedmessage-in-input-placeholder