<1> 父子组件通讯
两种方法：（1）函数式通讯 （2）类通讯
(一). 函数式父子组件通讯
- 只要在父组件中给子组件添加自定义的属性, 就可以给子组件传递数据
- React会把父组件传递的所有数据放到pros对象中传递给子组件
//1. 父组件中给子组件添加自定义的属性 <Header name={'sjl'} age={20}/> //2. React会把父组件传递的所有数据放到pros对象中传递给子组件 function Header(props) { console.log(props) return ( <div> <div className={'header'}>{props.name}+{props.age}</div> </div> ) }
1.如何在子组件设置参数默认值?
通过defaultProps:https://zh-hans.reactjs.org/docs/context.html
2.如何在子组件中校验参数类型?
通过propTypes：npm install prop-types
https://zh-hans.reactjs.org/docs/typechecking-with-proptypes.html
//Header.js文件内容 function Header(props) { console.log(props); return ( <div className={'header'}>{props.name}+{props.age}</div> ) } Header.defaultProps = { name: 'HUST', age: 20 } Header.propTypes = { name: ReactTypes.string, age: ReactTypes.number } export default Header;
(二）类组件父子组件通信
- React会把父组件传递的所有数据放到pros对象中传递给子组件
- React会把父组件传递的所有数据放到pros对象中传递给子组件——
构造函数+继承
//App.js文件内容 import React from 'react'; import Header from './Components/Header.js' import Main from './Components/Main.js' import Footer from './Components/Footer.js' class App extends React.Component{ render(){ return ( <div> <Main name={'sjl'} age={20}/> </div> ) } } export default App;
import React from 'react'; import './Main.css' import ReactTypes from "prop-types"; class Main extends React.Component{ constructor(props){ super(); this.props = props; } render(){ console.log(this.props); return ( <div className={'main'}>{this.props.name}+{this.props.age}</div> ) } static defaultProps = { name: 'HUST' age: 666 } static propTypes = { name: ReactTypes.string, age: ReactTypes.number } } export default Main;
其实构造函数可以直接简化为
constructor(props){ super(props); }
<2> 子父组件通讯
React中子父组件间通讯
1.父组件传递一个方法给子组件
2.子组件在调用父组件传递过来的方法
3.只组件在调用这个方法的时候, 就可以通过方法传参的形式给父组件传递数据或者方法了
//App.js文件内容 import React from 'react'; import Header from './Components/Header.js' import Main from './Components/Main.js' import Footer from './Components/Footer.js' class App extends React.Component{ render(){ return ( <div> <Header name={'lnj'} age={18}/> <Main name={'lnj'} age={18}/> <Footer fatherFn={this.myFn.bind(this)}/> </div> ) } myFn(name, age){ console.log(name, age); } } export default App;
//Footer.js文件 import React from 'react'; import './Footer.css' class Footer extends React.Component{ constructor(props){ super(props); } render() { return ( <div> <p>我是底部2</p> <button onClick={()=>this.props.fatherFn('yiya_xiaoshan', 20);}}>子组件按钮</button> </div> ) } } export default Footer;
<3> 跨组件开发实例
【1】父子间数据和方法通讯
import React from 'react'; class Son extends React.Component{ constructor(props){ super(props); } render(){ return ( <div> <p>我是儿子</p> <p>{this.props.name}</p> <button onClick={()=>{this.props.myFn(20)}}>儿子按钮</button> </div> ); } } class Father extends React.Component{ constructor(props){ super(props); } render(){ return ( <div> <p>我是爸爸</p> <Son name={this.props.name} appFn={this.props.appFn}/> </div> ); } } class App extends React.Component{ render(){ return ( <div> <Father name={'sjl'} appFn={this.myFn.bind(this)}/> </div> ) } myFn(age){ console.log(age); } } export default App;
【2】兄弟间数据和方法通讯
import React from 'react'; class A extends React.Component{ constructor(props){ super(props); } render(){ return ( <div> <button onClick={()=>{this.btnClick()}}>A按钮</button> </div> ) } btnClick(){ this.props.appFn('lnj'); } } class B extends React.Component{ constructor(props){ super(props); } render(){ return ( <div> <p>{this.props.name}</p> </div> ) } } class App extends React.Component{ constructor(props){ super(props); this.state = { name:'' } } render(){ return ( <div> <A appFn={this.myFn.bind(this)}/> <B name={this.state.name}/> </div> ) } myFn(name){ // console.log(name); this.setState({ name: name }) } } export default App;
