react 组件通信：
父传子：
父组件：
1 import React from 'react'; 2 import './App.css'; 3 //引入子组件 4 import Nav from "./components/Nav"; 5 export default class App extends React.Component{ 6 render () { 7 return ( 8 <div className="App"> 9 <Nav title={'父亲传递的值'}/> {/*父传子*/} 10 </div> 11 ); 12 } 13 14 }
子组件：
1 import React from "react"; 2 3 export default class Nav extends React.Component { 4 constructor(props) { 5 super(props); ///接收和传递数据 传递的数据会在props里 6 this.state = { //保持组件的状态 7 title: '' 8 } 9 } 10 render() { 11 return ( 12 <div> 13 <div>{this.state.title}</div> 14 </div> 15 ) 16 } 17 //完成挂载 18 componentDidMount() { 19 this.setState({ 20 title: this.props.title 21 }) 22 } 23 }
子传父：
子组件：
import React from "react"; export default class Input extends React.Component { constructor(props) { super(props); } render() { return ( <div> {/*给input 事件 把输入框的值 传给父组件 sendVal*/} <input type="text" ref="input" onInput={()=>{ this.props.sendVal(this.refs.input.value)}} /> </div> ) } }
父组件：
1 import React from 'react'; 2 import './App.css'; 3 4 //子组件1 5 import Input from "./components/Input"; 6 //子组件2 7 import Nav from "./components/Nav"; 8 9 export default class App extends React.Component { 10 constructor(props) { 11 super(props); 12 // 先给 msg 一个空值 13 this.state = { 14 msg: '' 15 } 16 } 17 // 声明一个方法用来接收Son1传来的值 18 inputVal=(msg)=> { 19 // 把Son1传来的值给放在父组件中 20 this.setState({ 21 msg:msg 22 }); 23 }; 24 25 render() { 26 return ( 27 <div className="App"> 28 {/*one:子组件1 向父组件传值 引入子组件 拿到上边声明的方法*/} 29 <Input sendVal={this.inputVal}/> 30 {/*two: 父组件向子组件传值 引入第二个子组件 并声明一个属性iptVal 把Son1传来的值传过去*/} 31 <Nav iptVal = {this.state.msg}/> 32 <div>{this.state.msg}</div> 33 </div> 34 ); 35 } 36 37 }
兄弟组件传值
父组件：
1 import React from 'react'; 2 import './App.css'; 3 4 //子组件1 5 import Input from "./components/Input"; 6 //子组件2 7 import Nav from "./components/Nav"; 8 9 export default class App extends React.Component { 10 constructor(props) { 11 super(props); 12 // 先给 msg 一个空值 13 this.state = { 14 msg: '' 15 } 16 } 17 // 声明一个方法用来接收Son1传来的值 18 inputVal=(msg)=> { 19 // 把Son1传来的值给放在父组件中 20 this.setState({ 21 msg:msg 22 }); 23 }; 24 25 render() { 26 return ( 27 <div className="App"> 28 {/*one:子组件1 向父组件传值 引入子组件 拿到上边声明的方法*/} 29 <Input sendVal={this.inputVal}/> 30 {/*two: 父组件向子组件传值 引入第二个子组件 并声明一个属性iptVal 把Son1传来的值传过去*/} 31 <Nav iptVal = {this.state.msg}/> 32 <div>{this.state.msg}</div> 33 </div> 34 ); 35 } 36 37 } 38 39
子组件1：
1 import React from "react"; 2 3 export default class Input extends React.Component { 4 constructor(props) { 5 super(props); 6 } 7 8 render() { 9 return ( 10 <div> 11 {/*给input 事件 把输入框的值 传给父组件 sendVal*/} 12 <input type="text" 13 ref="input" 14 onInput={()=>{ 15 this.props.sendVal(this.refs.input.value)}} 16 /> 17 </div> 18 ) 19 } 20 } 21 22
子组件2：
1 import React from "react"; 2 3 export default class Nav extends React.Component { 4 constructor(props) { 5 super(props); 6 this.state={ 7 iptVal:'' 8 } 9 } 10 11 render() { 12 return ( 13 <div> 14 <div>{this.state.iptVal}</div> 15 </div> 16 ) 17 } 18 19 componentDidMount() { 20 this.setState({ 21 //把从子组件传递过来的值 赋给 input 22 iptVal:this.props.iptVal 23 }) 24 } 25 }
