componentWillReceiveProps(nextProps) { // 在compoWillReceiveProps里接收到Main组件里所触发onScroll事件的改变activebtn样式的index // 并且设置为本组件的state this.setState({ activebtn: nextProps.scrollFlag.scrollIndex, }); }
我们的state控制我们高亮的按钮是第几个，它是一个数字。
更改导航条的样式
在这里，我使用了React周边的库：classnames，详情参见其api。
<span className={classnames({ [style.informationactive]: (this.state.activebtn === 1), })} onClick={() => this.handleClick(1, 'basicinformation')} >
在此，我们完成了一次从顶层组件触发事件，并做到函数节流，将事件一层层传递至底层展示型组件的一个过程。
最近一些关于前端开发的感慨
不要在组件中反复调用一个函数，这样会造成巨大的消耗！我们可以通过三元运算符、模板字符串做到的事情，请勿写一个新的函数。
jsx不要太过于冗余。我们尽量写成变量的形式，不然页面结构复杂，不易于我们捕捉bug。
减少后端请求，能存cookie则存cookie，能存localStorge则存localStorge。
简单的组件尽量自己写，请勿使用别人的组件，否则在需求更改、样式调整上会出现巨大困难并做一些无意义的事儿。