React-Intl передает перевод как строковую переменную, а не как объект

Question

Я добавляю response-intl в платежное приложение, которое я создаю, но наткнулся на препятствие. Прошу прощения, если к этому где-то обращались. Я изучил проблемы и документацию и не смог найти прямого ответа на этот вопрос (вероятно, просто не заметил его).

Вариант использования : После обработки платежа я хотел бы дать пользователь может написать в Твиттере переведенное сообщение, указывающее, что они пожертвовали.

Проблема : Twitter использует iframe для «обмена твитами» и требует текстового поля в качестве строковой переменной. Когда я передаю свой перевод, я получаю [object Object] в твите вместо переведенного текста. Это имеет смысл, исходя из моего понимания механизма перевода. Но я не могу найти способ передать строку, а не объект перевода.

что я получаю, когда использую {translate('example_tweet')}

const translationText = object

что мне нужно

const translationText = 'это переведенный текст'

Вопрос

Как мне получить переведенный текст как строковую переменную, а не как объект для отображения на странице?

Код

кнопка

import { Share } from 'react-twitter-widgets'
import translate from '../i18n/translate'

export default function TwitterButton () {
  return (
    <Share
      url='https://www.sampleSite.org' options={{
        text: {translate('example_tweet')},
        size: 'large'
      }}
    />
  )
}

перевести

import React from 'react'
import { FormattedMessage } from 'react-intl'

const translate = (id, value = {}) => <FormattedMessage id={id} values={{ ...value }} />

export default translate

Answer 1

Я смог решить эту проблему, не вмешиваясь в response-intl. Я создал функцию, которая извлекает нужный мне текст с самой страницы. Так что на самом деле не имеет значения, на каком языке. Я надеялся выяснить, как обрабатывать переводы как переменные, но это делает свою работу.

function makeTweetableUrl (text, pageUrl) {
    const tweetableText = 'https://twitter.com/intent/tweet?url=' + pageUrl + '&text=' + encodeURIComponent(text)
    return tweetableText
  }

function onClickToTweet (e) {
    e.preventDefault()
    window.open(
      makeTweetableUrl(document.querySelector('#tweetText').innerText, pageUrl),
      'twitterwindow',
      'height=450, width=550, toolbar=0, location=0, menubar=0, directories=0, scrollbars=0'
    )
  }

function TwitterButton ({ text, onClick }) {
  return (
    <StyledButton onClick={onClick}>{text}</StyledButton>
  )
}