React基础 组件传值

父传子

父组件

可以传递任意的类型

 

import React, { Component } from 'react'
import Child from './Child'

export default class Parent extends Component {
	state = {
		salary: 11.46
	}
	changeAge = () => {
		console.log(111)
	}
	render() {
		return (
			<div>
				<h3>父：平均工资{this.state.salary}</h3>
				<hr />
				<Child
					salary={this.state.salary}
					age={18}
					bBar={true}
					jsEle={<h2>Hello World</h2>}
					changeAge={this.changeAge}
				/>
			</div>
		)
	}
}

子组件

通过this.props.属性名  接收

import React, { Component } from 'react'

export default class Child extends Component {
	render() {
		const { age, bBar, jsEle, changeAge } = this.props
		return (
			<div>
				<p> {this.props.salary}</p>
				<p>{age}</p>
				<p>{bBar ? '1' : 0}</p>
				<div>{jsEle}</div>
				<button onClick={changeAge}>按钮</button>
			</div>
		)
	}
}

 constructor 的使用的注意点

 子传父

• 父组件通过属性传递一个回调函数
• 子组件调用传递过来的回调函数，并将要传递的数据作为回调函数的实参
• 父组件在回调函数中通过函数形参接收传递过来的数据并做出相应的操作

兄弟传值

• 准备A,B兄弟组件
• 把需要操作的B组件中的数据count 提升到公关父组件里面
• 父组件提供数据和操作数据的方法
• 把数据传递给B组件，把操作数据的方法传递给A组件

状态提升

 Context 跨组件通讯

通过Context 实现跨组件的通讯

• 祖先组件通过 React.createContext() 创建 Context 并导出

• 祖先组件通过 <Context.Provider> 配合 value 属性提供数据

• 后代组件通过 <Context.Consumer> 配合函数获取数据。

• 优化：提取 React.crateContext() 到单独的文件里面。

children 属性

• 组件的子节点会被当作是 childern 属性传递到子组件内部
• 在传递数据的时候 children 属性于普通的props 一样 ，值可以是任意类型 例如数组，数字，字符串，JSX，函数等

function Hello(props) {
    return <div>该组件的子节点：{props.children}</div>
}

;<Hello children='我是子节点' />
// children 是一个特殊的 prop，上面的写法和下面等价，当内容比较多的时候，下面的写法更加直观
;<Hello>我是子节点</Hello>

props 校验

如何对 props 进行校验

1. 安装并导入 props-types 包
2. 使用 组件名.propTypes = {} 来给组件的 props 添加校验规则
3. 校验规则通过 PropTypes 对象来进行指定

import React, { Component } from 'react'
import Test from './Test'

export default class App extends Component {
    render() {
        return (
            <div>
                <Test colors={'red'} />
            </div>
        )
    }
}

import React, { Component } from 'react'
import PropTypes from 'prop-types'

class Test extends Component {
    render() {
        return (
            <ul>
                {this.props.colors.map((item) => (
                    <li key={item}>{item}</li>
                ))}
            </ul>
        )
    }
}

Test.propTypes = {
    colors: PropTypes.array,
}
export default Test

1. 常见类型：number.string,bool,array,func,object
2. React 元素类型(JSX)：element
3. 必填项：isRequired
4. 特定结构的对象:shape（{}）

 props 默认值

通过 defalutProps 可以给组件的 props 设置默认值，在未传入的 prosp 的时候生效

 

import React, { Component } from 'react'
class Test extends Component {
    render() {
        return <div>{this.props.age}</div>
    }
}

Test.defaultProps = {
    age: 18,
}
export default Test

// 没有传入 pageSize 属性
;<Test />

建议使用ES6的语法

import React, { Component } from 'react'
class Test extends Component {
    render() {
        const { age = 18 } = this.props
        return <div>{age}</div>
    }
}

export default Test

•  好处：即便外部不传递也不至于程序报错；简化代码（也有一些数据很常用，这样的话指定默认值外界不需要每次都传递了）