因为react数据的单向流动，所以当嵌套组件的最内层想要获取最父级数据时，数据遵循自上而下单向流动的规则，既该数据要自父级开始经过所有嵌套的组件，才能最终到达最内层组件，如果每个组件进行props属性名的绑定，将是难以维护的。

解决办法是，依然使用props逐级传递，但是可以使用es6对象的拓展操作符，自动绑定所有属性名：<Tpl {...this.state.sth} />。

另外自react16开始，还可以使用createContext在组件之间共享数据，使用provider标签包裹父组件，consumer标签包裹子组件。

另一种写法

多层组件嵌套，一层一层传递值

属性传递符号

属性的扩展操作符

{...this.props}

可以解决组件之间属性多重传递的问题。

属性扩展操作符

{...this.props}

解决组件之间属性多重传递的问题。

{...this.props} es6属性扩展 获取父组件的所有属性集

属性扩展操作：{...props}

{...this.props} es6属性扩展 获取父组件的所有属性集

三个点。。。表示属性扩展（es6的新特性）

react 属性只能自上而下传递，不能从下往上传递

{...props} 可以直接接受所有从父节点传下来的所有属性  减少代码  使属性更新的 难度降低

深层次的传值使用  {...this.props}

子组件向父组件获取属性，最外层父组件定义属性。

属性的扩展操作符  ...  代替多个属性

...是JavaScript是新是扩展方法， ...this.props继承父集所有属性