为什么React-intl在Ant-design内部不起作用?

时间:2019-07-15 01:50:52

标签: reactjs antd react-intl

FormattedMessage在蚂蚁设计的Form.Item元素内部不能正常工作,如果Form.Item元素外部的FormattedMessage可以正常工作。救救我!

位于Form.Item元素外部的FormattedMessage正常工作

<Form.Item label={<FormattedMessage id="formSignIn.emailField" />}>
    {form.getFieldDecorator('email', {
        rules: [{ required: true, message: <FormattedMessage id="formSignIn.emailValidate" />}],
    })(
        <FormattedMessage id="formSignIn.emailValidate">
            {placeholder => (
            <Input prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder={placeholder} />
            )}
        </FormattedMessage>,
    )}
</Form.Item>

FormattedMessage在蚂蚁设计的Form.Item元素内不起作用

1 个答案:

答案 0 :(得分:3)

    class DemoForm extends React.Component {
        render() {
            const {getFieldDecorator} = this.props.form;
            const {intl} = this.props;
            const placeholder = intl.formatMessage({id:'enterHere'});

            return (
                 <Form.Item label={<FormattedMessage id='name'/>}>
                  {getFieldDecorator('name',)(<Input placeholder={placeholder}/>)}
                 </Form.Item>
            )
       }
}
export const Demo = injectIntl(Form.create()(DemoForm));

使用此 Demo 类显示组件。