2017-09-01 20 views
1

我按照https://facebook.github.io/react/docs/higher-order-components.html编写了高阶组件(HOC)。它包装了一个呈现某种类型的纯组件。想要在语言改变后使高阶组件重新呈现错误消息

我的HOC获取验证函数作为属性。当输入值改变时,它调用验证器(newValue)。 validator()返回一个错误信息或一个空白字符串。 validator()方法可能会依次调用一个方法,根据用户设置将其错误消息转换为不同的语言。

我的问题是,如果用户在显示错误消息后更改语言,则React不会以新选择的语言重新显示错误消息,因为只有在validator()返回不同的语言值,并且validator()只有在它包装的输入值发生变化时才被调用。 HOC无法知道该语言已经改变,除非我将该语言作为HOC的财产。

我最初编写HOC接受所选语言作为属性,然后将其validator()属性返回的任何错误消息进行翻译,但我认为由于担忧的混合而产生“异味”。我相信HOC不应该意识到目前的语言,因为这不是它所关心的。用选择的语言生成错误消息应该是每个validator()方法的责任。那有意义吗?

我想过的一件事就是拥有changeLanguage()处理器技巧通过遍历子DOM中的所有输入,取消设置,然后将其重置为当前值,从而认为所有输入都已更改。这将强制所有validator()方法再次运行,这次用新选择的语言生成错误消息。当然,这是一种黑客行为。我会换一种反模式。

我知道改变语言是一种边缘情况。我打算根据Accept-Language HTTP标头设置语言,但是我读到这种情况令人灰心,因为不能总是依赖Accept-Language来反映用户真正想要的内容。你可以用它作为第一个猜测,但如果有多个选择,必须给他一个改变它的方法。所以这打开了潘多拉的盒子。

有什么建议吗?

回答

0

我可以回答我自己的问题。

HOC呈现错误消息。我可以将这部分分解成它自己的React组件,并将其赋予语言属性,以便在语言更改时重新呈现它。简单!