使用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。