使用react-intl和react-bootstrap

Question

使用react-intl和react-bootstrap

twitter-bootstrapreactjsreact-bootstrapreact-intl

3

我有一个模板化的TextAreaField，使用了react-bootstrap的FormControl来提供漂亮的bootstrap外观和感觉。

我希望能够通过react-intl使用国际化消息。它可以在FormControl之外的所有组件中工作，但是在props中无法使用。当我尝试将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的redux-form

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

- alt

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Christopher Chiche · Accepted Answer

该占位符期望的是字符串而不是对象，因此无法使用FormattedMessage组件。不过，你可以直接从上下文中访问react-intl.formatMessage函数。

例如，下面是一个简单的组件，它使用上下文中的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>
    }
}

您可以查看FormattedMessage组件的实现，获得更复杂的示例。

此外，您可以考虑使用诸如react-intl-redux这样的库，以支持redux，或者mobx-react-intl，如果您不想处理上下文但需要在必要时注入存储。