react-intlを反応ブートストラップと併用する

Question

私はFormControlからreact-bootstrapを使用してテンプレートのTextAreaFieldを得て、素敵なブートストラップのルックアンドフィールを提供しています。

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を使用する単純なコンポーネントがあります。

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コンポーネントを調べることができます。

また、reduxにはreact-intl-reduxやmobx-react-intなどのライブラリを使用することを検討することができますが、コンテキストを処理せずに必要に応じて店舗を追加することをお勧めします。