# 組件間數據通信父向子 > 在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是大家約定的，都這么寫。所以就不要隨意起名。 父組件向子組件傳遞的數據量很大時，可以通過屬性擴散的形式向下傳遞。 子組件接收數據，也可以通過解構的方式化簡書寫的麻煩。