各个组件之间进行页面交互渲染的时候,经常需要实现state数据传值,以及不同组件之间函数的调用
props将作为组件之间交互的桥梁
// 1 导入react
import React from 'react'
import ReactDOM from 'react-dom'
/*
接收数据
*/
class Hello extends React.Component{
render(){
console.log('接收到的值:' + this.props)
return (
<div>
<h1>props:{this.props.age}</h1>
</div>
)
}
}
// 传递数据
ReactDOM.render(<Hello name="rose" age={19}/>, document.getElementById('root'))
在渲染的Hello组件中增加name=“rose” age = {19}这两个属性。
组件内部通过获取this.props即可。
props获取的值为只读,不可修改
更新视图后:
————组件之间传值的三种方式
1、父组件向子组件传值
首先在父组件中提供state初始数据
在子组件上添加属性,属性值为要传递的值
通过props接收
// 1 导入react
import React from 'react'
import ReactDOM from 'react-dom'
//引入样式
import './index.css'
/*
props
*/
//父组件
class Parent extends React.Component{
state={msg:'今天学习了吗?'}
render(){
return (
<div className='parent'>
父组件:<Child msg={this.state.msg}/>
</div>
)
}
}
//子组件
const Child=props=>{
console.log('子组件',props)
return (
<div className='child'>
来自父组件传来的值: <span className='data'>{props.msg}</span>
</div>
)
}
// 传递数据
ReactDOM.render(<Parent />, document.getElementById('root'))
2、子组件向父组件传值
利用回调函数,父组件提供回调函数,子组件中进行调用,将值作为该函数传递的形参
// 1 导入react
import React from 'react'
import ReactDOM from 'react-dom'
//引入样式
import './index.css'
/*
props
*/
//父组件
class Parent extends React.Component{
state={parentMsg:''}
//提供回调函数,用来接收数据
getChildMsg=data=>{
console.log('来自子组件中的值:',data)
this.setState({
parentMsg:data
})
}
render(){
return (
<div className='parent'>
父组件:{this.state.parentMsg}
<Child getChildMsg={this.getChildMsg} />
</div>
)
}
}
//子组件
class Child extends React.Component{
state={
msg:'今天学习了react传值'
}
//调用父组件中的回调函数
handleClick=()=>{
this.props.getChildMsg(this.state.msg)
}
render(){
return (
<div className='child'>
<button onClick={this.handleClick}>点击传值</button>
</div>
)
}
}
// 传递数据
ReactDOM.render(<Parent />, document.getElementById('root'))
3、兄弟组件之间传值
将共享状态提升到最近的父组件中,由公共的父组件进行管理状态
// 1 导入react
import React from 'react'
import ReactDOM from 'react-dom'
/*
props
*/
//父组件
class Parent extends React.Component {
//提供共享状态
state = { count: 0 }
//提供修改状态的方法
onInCrement = () => {
this.setState({
count: this.state.count + 1
})
}
render() {
return (
<div className='parent'>
<Child1 count={this.state.count} />
<Child2 onInCrement={this.onInCrement} />
</div>
)
}
}
//子组件1
class Child1 extends React.Component {
render() {
return (
<h1>计数器:{this.props.count}</h1>
)
}
}
class Child2 extends React.Component {
add = () => {
this.props.onInCrement()
}
render() {
return (
<button onClick={this.add}>+1</button>
)
}
}
// 传递数据
ReactDOM.render(<Parent />, document.getElementById('root'))
公共状态和修改状态值方法都在父组件中,只要子组件中调用了父组件中的方法,任何接收的状态值都将发生改变
4、跨组件传递数据
若涉及组件的多层嵌套,若A组件中调用B组件,B组件中又调用C,通过一层一层添加属性会显得十分繁琐,这种情况下就可以使用Context
context提供了两个组件,分别是Provider(提供数据)和Consumer(消费数据),对应使用在父组件和数据接收组件上。
使用之前调用该组件
const {Provider,Consumer} = React.createContext()
// 1 导入react
import React from 'react'
import ReactDOM from 'react-dom'
/*
context
*/
import "./index.css"
const { Provider, Consumer } = React.createContext();
class App extends React.Component {
render() {
return (
<Provider value="pink">
<div className='app'>
<Node></Node>
</div>
</Provider>
)
}
}
const Node = props =>{
return (
<div className='node'>
<SubNode />
</div>
)
}
const SubNode = props =>{
return (
<div className='subnode'>
<Child />
</div>
)
}
const Child = props =>{
return (
<div className='child'>
<Consumer>{data=><span>我是子节点------{data} </span>}</Consumer>
</div>
)
}
// 传递数据
ReactDOM.render(<App />, document.getElementById('root'))
5、children属性获取子节点
——表示组件标签的子节点,任何组件只要有子节点就会有该属性
——通过children属性获取的值可以是任意类型,包括文本,React元素,组件,甚至是函数
/*
children属性
*/
const Test = () => <button>我是button组件</button>
const App = props => {
console.log(props)
// props.children()
return (
<div>
<h1>组件标签的子节点</h1>
{props.children}
</div>
)
}
ReactDOM.render(<App><Test /></App>, document.getElementById('root'))
6、props校验
——对于组件来说,props是外来的,可能是任意类型的数据,在不确定数据类型的情况下进行操作难免会报错
——在创建组件时,指定props的类型,格式
——使用步骤:
1、安装包prop-types(yarn add prop-types / npm install prop-types)
2、导入包prop-types包‘
3、使用组件名 propTypes = {}来给组件props添加约束规则
// 1 导入react
import React from 'react'
import ReactDOM from 'react-dom'
/*
props校验
*/
import PropTypes from 'prop-types'
const App = props => {
const arr = props.colors
const lis = arr.map((item,index)=><li key={index}>{item}</li>)
return (
<ul>{lis}</ul>
)
}
ReactDOM.render(<App colors={['blue','green']}> </App>, document.getElementById('root'))