标签： react

初识 react-intl

5.9更新
继续踩坑。
因为要传递自定义的函数，于是将 react-router 属性中的 component 改成了 render 。结果发现props中的 match 和 history 直接不见了。原因是又踩了另外一个坑。

正确的打开姿势是：

<Match exactly pattern="/" render={(props) => <Home msg={"hello"} {...props} />} />

*还是没有超过初学者的范畴，参考 git issue ： https://github.com/ReactTraining/react-router/issues/4293
=============

最近拿手头一个小项目尝试了一下 React 。项目中涉及到了国际化（其实就是中英文切换），于是（也没有第二选择地）使用了雅虎出的 react-intl 。
说句实在话就是文档看的有点头疼，因为 react 自带全家桶属性，而它提供的挺多东西还是没能用得上的。
开发过程中参考了两个项目：
1）https://github.com/DWboutin/react-webpack-startup
2）https://segmentfault.com/a/1190000005824920
遇到的最大的问题就是在于要提供一个切换语言的按钮。 React 的组件化让我包在最外面的整站 IntlProvider 需要一层一层地把事件传递到页面内部。
大概结构就是：


<IntlProvider ...config>
<App>
...
<Router render={()=><PageContent changeLanguageFunc={this.changeLang}/>}>
...
</App>
</IntlProvider>

然后在<PageContent/>中通过 this.props.changeLanguageFunc 来调用。如果你的这个函数还在下一级的组件里，那就要继续传递了。
这个方法主要参考的是 AlloyTeam 的这篇文章：http://www.alloyteam.com/2016/01/some-methods-of-reactjs-communication-between-components/

真正学会 React 是个漫长的过程啊~