Verwendung von react-intl mit react-bootstrap

Question

Ich habe ein TemplateAreaField, das FormControl von react-bootstrap verwendet, um ihm das schöne Bootstrap-Look and Feel zu geben.

Ich möchte in der Lage sein, internationalisierte Nachrichten über react-intl zu verwenden. Es funktioniert für alle Komponenten außerhalb der FormControl, aber nicht in den Requisiten. Wenn ich eine FormattedMessage an die placeholder übertrage, zeigt es gerade [object Object]

Irgendwelche Ideen?

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; 

Die redux-Form, die die TextAreaField

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

Answer 1

Der Platzhalter eine Zeichenfolge verwendet erwartet, kein Objekt. Sie können also die Komponente FormattedMessage nicht verwenden. Glücklicherweise können Sie direkt auf die react-intl.formatMessage-Funktion aus dem Kontext zugreifen.

Zum Beispiel ist hier eine einfache Komponente, die formatMessage aus dem Kontext verwendet, um einen Bereich zurückzugeben, der die label Nachricht enthält.

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> 
    } 
} 

Sie können die implementation of the FormattedMessage Komponente für ein komplexeres Beispiel nachschlagen.

Sie könnten auch eine Bibliothek wie react-intl-redux für Redux oder mobx-react-int verwenden, wenn Sie es vorziehen, sich nicht mit dem Kontext zu befassen, sondern die Speicher bei Bedarf zu injizieren.