react-组件传值

我们来实现一个登入注销：

运行效果图：

设计图：

上面实现功能涉及到react中组件传值、条件渲染以及state管理策略。

我们先来说说父子组件通信：

上面例子中，登入状态isLogin交由LoginControl组件管理，通过props对象向子组件传递，那么子组件如何更改isLogin的值呢？拿Login组件为例，该组件是一个登入按钮组件，点击时会将isLogin值设置为true，显然我们不能直接更改LoginControl组件传递过来isLogin值，因为isLogin存在于LoginControl组件的私有state中，既然是私有的，那么我们可以在LoginControl组件里定义一个更改isLogin的方法，然后交由Login组件触发。例子中我们通过props将方法交由子组件，但需要注意的是该方法执行者应该是父组件，所以在父组件中做了this绑定。

state管理策略：
上面例子中Greet、Button子组件都用到了isLogin状态，为了让这两个组件能够共享同一个状态值，显然我们得找到他们俩的共同祖先，将isLogin交由祖先管理