目录
目录
一、父组件与子组件通信
1.父组件给子组件传值
1.在调用子组件的时候定义一个属性 <Header msg="我是子组件 首页">
2. 子组件里面 this.props.msg
//子组件
import React from 'react'
class Header extends React.Component{
// ....
render(){
return(
<div> {this.props.msg}</div>
)
}
}
//父组件
class Home extends React.Component{
//...
render(){
return(
<Header msg="首页 from 父组件">
)
}
}
2.父组件给子组件传方法
//父组件
class Home extends React.Component{
//...
getData=()=>{
console.log('Home 组件');
}
render(){
return(
<Header getData={this.getData}>
)
}
}
3.父组件给子组件传自己本身的组件
//父组件
class Home extends React.Component{
//...
render(){
return(
<Header home={this}>
)
}
}
4. 父组件获取子组件的数据
//父组件
class Home extends React.Component{
//...
getData=()=>{
console.log(this.refs.header);
}
render(){
return(
<Header ref="header">
)
}
}
对于ref属性补充:
1. ref属性只能获取类组件的实例,不能获取函数
2. 在函数中ref属性可以引用其他DOM元素或组件
function List (){
return <input/>
}
class Container extends React.Components{
//ref 不成效
render(){
return(
<List ref={(input)=>{this.listInput=input}}/>
)
}
}
//2. ref可以在函数中获取dom和组件
function List(){
const textInput=null;
const handleFoucs=()=>{
textInput.focus();
}
return(
<input ref={(input)=textInput=input>}/>
<button onClick={handleFoucs}></button>
)
}
二、子组件对父组件值类型的设置
1.当父组件不传值的时候设置默认
// Header 为类名
//定义默认的props
Header.defaultProps={
msg:'default msg'
}
2. 规定父组件传值的数据类型
//1 引入 prop-type
import PropTypes from 'prop-types'
//2. 定义父组件传过来值得类型
Header.propTypes={
num:PropTypes.number
}
*:定义的时候propTypes首字母小写,定义属性类型时则要大写
三、通过context传递
定义步骤:
1.创建context对象
2.在组件的childContextTypes属性上定义 context对象的属性的类型信息
class UserListContainer extends React.Component{
/** 省略其余代码 **/
//1. 创建context对象,包含onAddUser方法
getChildContext() {
return {onAddUser: this.handleAddUser};
}
// 新增用户
handleAddUser(user) {
this.setState((preState) => ({users:
preState.users.concat([{'id':'c', 'name': 'cc' }])}))
}
render() {
const filterUsers = this.state.users.filter((user) =>
{user.id = this.state.currentUserId});
const currentUser = filterUsers.length > 0 ?
filterUsers[0] : null;
return (
<UserList users={this.state.users}
currentUserId = {this.state.currentUserId}
onSetCurrentUser = {this.handleSetCurrentUser}
/>
<UserDetail currentUser = {currentUser} />)
}
}
//2. 声明context的属性的类型信息
UserListContainer.childContextTypes = {
onAddUser: PropTypes.func
};
使用:
class UserAdd extends React.Component{
/**省略其余代码**/
handleClick() {
if(this.state.newUser && this.state.newUser.length > 0){
//2.通过this.conext 调用conextTypes中的方法
this.context.onAddUser(this.state.newUser);
}
}
render(){
return(
<input onChange={this.handleChange} value={this.state.newUser} />
<button onClick={this.handleClick}>Add</button>
)
}
}
// 1.声明要使用的context对象的属性
UserAdd.contextTypes = {
onAddUser: PropTypes.func
};