React组件深入props

// children属性   文本节点
// const App = props => {
// 	console.log(props);
// 	return (
// 		<div>
// 			<h1>组件标签的子节点:</h1>
// 			{props.children}
// 		</div>
// 	)
// }
// reactDom.render(<App>我是子节点</App>,document.getElementById('root'))

//   jsxs   组件
const App = props => {
	console.log(props);
	return (
		<div>
			<h1>组件标签的子节点:</h1>
			{props.children}
		</div>
	)
}
reactDom.render(
	<App>
		<p>我是子节点,是p标签</p>
	</App>
	, document.getElementById('root'))

props校验

// props 校验
const App = props => {
	const arr = props.colors
	const lis = arr.map((item, index) => <li key={index}>{item}</li>)
	return <ul>{lis }</ul>
}
// 添加props校验
App.propTypes = {
	colors:PropTypes.array
}
reactDom.render(<App colors={['red','blue']} />,document.getElementById('root'))

 常用的约束规则

 props默认值   比如分页组件-每页多少条

// props 默认值   如果传值以传入的值为主
const App = props => {
	console.log(props);
	return (
		<div>
			<h1>默认值:{ props.pageSize }</h1>
		</div>
	)
}
// 添加props校验
App.defaultProps = {
	pageSize:10
}
reactDom.render(<App />,document.getElementById('root'))