# 组件间数据通信父向子 > 在Vue 中我们已经了解过 父向子传递数据是通过**Props**(属性)来进行传递数据。React也同是是通过Props属性向子组件传递数据。 > 和Vue一样在定义组件时我们称之为子组件。在调用组件时称之为父组件  ## 父向子传递数据体验 父组件通过标签属性来传递。子组件通过构造函数中的形参来进行接收。 ```jsx function Hello(props) { console.log(props); return <div> 这是一个div{name} <h1>这是一个大大的h1</h1> </div>; } ReactDOM.render(<Hello name='小黑'></Hello>, document.getElementById('app')) ``` ## 父向子传递数据高级 一般来讲我们向子组件传递数据，可能会有大量的数据，那我们如何操作呢？ <iframe width="100%" height="300" src="//jsrun.net/IFyKp/embedded/all/light" allowfullscreen="allowfullscreen" frameborder="0"></iframe> ~~~ function Hello(props) { console.log(props); return <div> 这是一个div 名字是{props.name} 价格是{props.price} <h1>这是一个大大的h1</h1> </div>; } ReactDOM.render(<Hello name='小黑' price="10"></Hello>, document.getElementById('app')) ~~~ ## 问题 上面的源码我们写的也不错。不过如果一旦父向子传递的数据越来越多那该怎么办？那我们在父组件上写的标签属性会越来越多。如何解决问题？ React提供了属性扩散来帮助我们解决问题。 我们看一下如何改造 ~~~ var cat = { name:'小黑', price:'10' } ReactDOM.render(<Hello {...cat}></Hello>, document.getElementById('app')) ~~~ <iframe width="100%" height="300" src="//jsrun.net/aFyKp/embedded/all/light" allowfullscreen="allowfullscreen" frameborder="0"></iframe> ## 总结 父组件向子组件传递数据可以通过 标签属性传递。 子组件接收父组件传递的值通过书写形参props来接收。props是大家约定的，都这么写。所以就不要随意起名。 父组件向子组件传递的数据量很大时，可以通过属性扩散的形式向下传递。 子组件接收数据，也可以通过解构的方式化简书写的麻烦。