Как добавить динамический идентификатор в FormattedMessage в React Intl

У меня есть область состояния с полем описания, и с сервера я даю состояние, например. STARTED, FINISH, ARCHIVED.

И я использую FormattedMessage для другого языка, например:

<FormattedMessage id = {"state." + this.props.state} defaultMessage = "defaultState" />

Это не работает.

есть какое-нибудь решение для этого случая?

Обновлено: Состояние по умолчанию - нет. Загружаю данные с сервера.

Мой компонент:

class State extends Component {

render() {
    return (
        <Card>
            <CardBody className = "text-center">
                <Button className = "bg-primary">
                    <FormattedMessage id = {"state." + this.props.query.findCourseUserStatus.state} defaultMessage = "defaultState" />
                    }
                </Button>
            </CardBody>
        </Card>
    );
}
}

export default createFragmentContainer(
    State,
    graphql`
    fragment State_query on Query {
          findCourseUserStatus(id: $courseId){
          courseId
          state
          }
    },
    `
);

какой у тебя defaultState?

— 17.12.2018 16:55

Где хранится ваш штат, содержащий STARTED, FINISH, ARCHIVED? Можете ли вы показать нам свой полный компонент

— 17.12.2018 17:10

reactjs react-intl

17.12.2018 16:10

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Массив зависимостей в React

Все о массиве Dependency и его связи с useEffect.

Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов

Проще говоря, компонент - это фабрика для создания элементов.

Руководство по использованию хука useEffect для методов жизненного цикла React

1 850

Ответы 1

enter code here

Its an old question but i would like to answer it for future reference,

Есть два пути:

для компонента класса мы можем использовать injectIntl как hoc.

    import {injectIntl } from 'react-intl';

    class State extends Component {
       render() {
          return (
        <Card>
            <CardBody className = "text-center">
                <Button className = "bg-primary">
                    {this.props.intl.formatMessage({id:{"state." + this.props.query.findCourseUserStatus.state},
        defaultMessage = "defaultState" })}
                </Button>
            </CardBody>
        </Card>
    );
    }

}

export default injectIntl(State);

Обновленная версия response-intl предоставляет хуки injectIntl для функционального компонента.

Использование будет таким.

import {useIntl } from 'react-intl';

const State  = (props) {
     const intl = useIntl();
            <Card>
                <CardBody className = "text-center">
                    <Button className = "bg-primary">
                        {intl.formatMessage({id:{"state." + props.query.findCourseUserStatus.state},
            defaultMessage = "defaultState" })}
                    </Button>
                </CardBody>
            </Card>
        );
        }


    export default State;

есть ли синтаксическая ошибка? он говорит неожиданный токен вокруг {id: { here

— 16.09.2020 21:04

25.04.2020 15:41