使用react-intl與react-bootstrap

Question

我有一個模板化的TextAreaField，它使用FormControl從react-bootstrap爲它提供良好的引導程序外觀。

我希望能夠通過react-intl使用國際化郵件。它適用於FormControl以外的所有組件，但不適用於道具。當我嘗試通過FormattedMessage到placeholder它只顯示[object Object]

任何想法？

TextAreaField.js

import React, {PropTypes} from 'react'; 
import Help from './Help'; 
import {FormGroup, ControlLabel, FormControl } from 'react-bootstrap'; 

const TextAreaField = ({ input, label, tooltip, rows, meta }) => { 
    const { touched, warning, error} = meta; 
    let currentState = null; 
    if (touched) currentState = (error ? "error" : warning ? "warning" : null); 
    return (
     <FormGroup controlId={input.name} validationState={currentState}> 
      {tooltip && <Help input={input.name} text={tooltip}/>} 
      <FormControl 
       componentClass="textarea" 
       style={{height: rows * 2 + "em"}} 
       placeholder={label} 
       {...input} 
      /> 
      {currentState && <ControlLabel className={currentState}>{error || warning}</ControlLabel>} 
     </FormGroup> 
    ); 
}; 

TextAreaField.propTypes = { 
    input: PropTypes.object.isRequired, 
    label: PropTypes.object.isRequired, 
    tooltip: PropTypes.object, 
    meta: PropTypes.object, 
    rows: PropTypes.number, 
}; 

TextAreaField.defaultProps = { 
    rows: 3 
}; 

export default TextAreaField; 

使用該TextAreaField

<Field name="text" label={<FormattedMessage id="Order.Text" />} validate={required} 
      warn={bigJob} component={TextAreaField} rows={5}/> 

Answer 1

佔位符需要一個字符串，而不是一個對象了Redux形式。所以你不能使用FormattedMessage組件。幸運的是，您可以直接從上下文訪問​​函數。

例如，下面是一個簡單的組件，它使用上下文中的formatMessage返回包含label消息的範圍。

import {Component, createElement, isValidElement} from 'react'; 
import {intlShape} from '../types'; 

export default class FormattedMessage extends Component { 

    static contextTypes = { 
     intl: intlShape, 
    }; 

    render() { 
     const {formatMessage, textComponent: Text} = this.context.intl; 
     return <span>{formatMessage({id: 'label'})}</span> 
    } 
} 

您可以查看implementation of the FormattedMessage組件查看更復雜的示例。

如果您不想處理上下文，但在需要時注入商店，您可以考慮使用庫如react-intl-redux for redux或mobx-react-int。