react 組件傳值的三種方法

 class Children extends Component{
 constructor(props){
 super(props);
 }
 render(){
 return(
 <div>這是：{this.props.name}</div> // 這是 父向子
 )
 }
 }

 class App extends React.Component{
 render(){
 return(
 <div>
 <Children name="父向子"/>
 </div>
 )
 }
 }

 class Children extends Component{
 constructor(props){
 super(props);
 }
 handerClick(){
 this.props.changeColor('skyblue') // 執行父組件的changeColor 并傳參 必須和父組件中的函數一模一樣
 }
 render(){
 return(
 <div>
 <div>父組件的背景色{this.props.bgcolor}</div> // 子組件接收父組件傳過來的值 bgcolor
 <button onClick={(e)=>{this.handerClick(e)}}>改變父組件背景</button> // 子組件執行函數
 </div>
 )
 }
 }

 class Father extends Component{
 constructor(props){
 super(props)
 this.state = {
 bgcolor:'pink'
 }
 }
 bgChange(color){
 this.setState({
 bgcolor:color
 })
 }
 render(props){
 <div style={{background:this.state.bgcolor}}>
 // 給子組件傳遞的值 color 
 <Children bgcolor={this.state.bgcolor} changeColor={(color)=>{this.bgChange(color)}} /> 
 // changeColor 子組件的參數=color 當做形參
 </div>
 }
 }

 class Children1 extends Component{
 constructor(props){
 super(props);
 }
 handerClick(){
 this.props.changeChild2Color('skyblue') 
 // 改變兄弟組件的顏色 把changeChild2Color的參數傳給父
 }
 render(){
 return(
 <div>
 <div>children1</div>
 <button onClick={(e)=>{this.handerClick(e)}}>改變children2背景</button>
 </div>
 )
 }
 }

 class Children2 extends Component{
 constructor(props){
 super(props);
 }
 render(){
 return(
 <div style={{background:this.props.bgcolor}}>
 // 從父元素獲取自己的背景色
 <div>children2 背景色 {this.props.bgcolor}</div>
 // children2 背景色 skyblue
 </div>
 )
 }
 } 

class Father extends Component{
 constructor(props){
 super(props)
 this.state = {
 child2bgcolor:'pink'
 }
 }
 onchild2bgChange(color){
 this.setState({
 child2bgcolor:color
 })
 }
 render(props){
 <div>
 <Children1 changeChild2Color={(color)=>{this.onchild2bgChange(color)}} />
 <Children2 bgcolor={this.state.child2bgcolor} />
 </div>
 }
}