React中props

在React中props的使用场景挺多的，这里总结下

1. 组件的props

// 使用组件
<Hello name="Aaron" age={18}>

// 函数组件 使用props
function Hello(props) {
	return (
		<div>接收到数据: {props.name}</div>
	)
}

// 类组件 使用this.props
class Hello extends React.Component {
	render() {
		return (
			<div>几首到的数据{this.props.age}</div>	
		)
	}
}

2. 组件通讯

• 父 => 子

// 父组件
class Parent extends React.Component {
	state = { lastName: '陈' }
    render() {
   	return (
   		<div>
   			传递数据给子组件: <Child name={this.state.lastName} />
   		</div>
   	)
   }
}

// 子组件
class Child extends React.Component {
   render() {
   	return (
   		<div>
   			父传给子的数据: {this.props.name}
   		</div>
   	)
   }
}

• 子 => 父

// 父组件
class Parent extends React.Component {
	state = {
   	parentMsg: ''
   }
	getChildMsg = data => {
   	this.setState({
   		parentMsg: data
   	})
   }
   render() {
   	return(
   		<div>
   			父组件: {this.state.parentMsg}
   			<Child getMsg={this.getChildMsg} />
   		</div>	
   	)
   }
}

	// 子组件
	class Child extends React.Component {
   	state = {
   		msg: '学前端'
   	}
   	handleClick = () => {
   		this.props.getMsg(this.state.msg)
   	}
   	render() {
   		return (
   			<div>
   					子组件: <button onClick={this.handleClick} />
   				</div>
   		)
   	}
   }

• 兄弟组件通讯(借助父组件)

class Counter extends React.Component {
   state = {
   	count: 0
   }
   onIncrement = () => {
   	this.setState({
     		count: this.state.count + 1
  		 })
 	}
 	render() {
   	return (
   		<div>
   			<Child1 count={this.state.count} />
   			<Child2 onIncrement={this.onIncrement} />
   		</div>
   	)
   }
}

// Child1
const Child1 = (props) => {
 	return <h1>计数器: {props.count}</h1>
}

const Child2 = (props) => {
 	return <button onClick={() => props.onIncrement()}>+1</button>
}

• 对于通讯来说还可以使用Context解决祖孙组件的通讯

const { Provider, Consumer } = React.createContext()
class App extends React.Component {
 render() {
   return (
   // value表示要传递的数据
     <Provider value='pink'>
       <div className='app'>
         <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>
}

3.props校验

• children属性

// 当组件中有子节点时, props.children就代表该子节点的内容
function Hello(props) {
	return (
		<div>
			组件的子节点: {props.children}
		</div>
	)
}
<Hello>我是子节点</hello>

• props校验(由于使用组件的时候传递的数据格式可能不符合组件自身设定的格式,可以使用props校验)
  npm i props-types|yarn add prop-types

import PropTypes from 'prop-types'
function App(props) {
	return (
		<h1>Hi,{props.colors}</h1>
	)
}
// 添加props校验
App.propTypes = {
  	colors: PropTypes.array
}

• 其他约束

App.propTypes = {
  a: PropTypes.number,
  fn: PropTypes.func.isRequired,
  tag: PropTypes.element,
  // shape方法指定特定结构
  filter: PropTypes.shape({
    area: PropTypes.string,
    price: PropTypes.number
  })
}

• props默认值

const App = props => {
  console.log(props)
  return (
    <div>
      <h1>此处展示props的默认值: {props.pageSize}</h1>
    </div>
  )
}

// 添加props默认值
App.defaultProps = {
  pageSize: 10
}

const container = document.getElementById('root');
const root = createRoot(container);
root.render(<App pageSize={20} />);