0

我正在将 react-intl 添加到我正在构建但遇到障碍的支付应用程序中。如果这已在某处得到解决，我深表歉意。我搜索了问题和文档，但找不到对此的直接答案（可能只是忽略了它）。

用例：处理完付款后，我希望用户可以选择在推特上发送一条已翻译的消息，表明他们已捐款。

问题：Twitter 使用 iframe 来“分享推文”，并且需要一个文本字段作为字符串变量。当我通过我的翻译时，我会[object Object]进入推文而不是翻译文本。根据我对翻译引擎的理解，这是有道理的。但我似乎找不到传递字符串而不是翻译对象的方法。

我使用时得到的{translate('example_tweet')}

常量翻译文本 = 对象

我需要的

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
4

1 回答 1

0

我能够在不弄乱 react-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>
  )
}
于 2020-06-16T15:49:47.243 回答