使用复杂消息语法复数格式化消息

Question

我尝试使用 FormattedMesage(React intl) 来使用格式化 API。如何使用复数创建一个格式化的消息？ 现在：

const outputTimeOutValues = [
        {value:'00:00:01', translationId:'passage.outputTimeOut.oneSecond'},
        {value: '00:00:03', translationId:'passage.outputTimeOut.threeSeconds'},
        {value: '00:00:05', translationId: 'passage.outputTimeOut.fiveSeconds'},
        {value: '00:00:10', translationId: 'passage.outputTimeOut.tenSeconds'},
        {value: '00:00:15', translationId: 'passage.outputTimeOut.fifteenSeconds'},
        {value: '00:00:30', translationId: 'passage.outputTimeOut.thirtySeconds'}]

    const renderMenuItems = values => values.map(({value ,translationId}) =>
        <MenuItem value={value} primaryText={<FormattedMessage id={translationId} />}/>)

使用消息语法的预期内容

const renderMenuItems1 = values => values.map(({minutes, seconds}) =>
    <MenuItem value={`00:${minutes}:${seconds}`} primaryText={<FormattedMessage

        defaultMessage={'Hello {seconds}, you have {minutes, second} one {minute} other {minutes}'}
        values={{seconds, minutes}}
    />}
    />)

预期文本：1 秒、2 秒等。

Answer 1

使用injectIntl 将 intl 类作为道具注入到您的组件中。 然后，您可以在消息上调用 intl.formatMessage()，然后将其作为 primaryText 属性插入到您的 MenuItem 组件中。