这是我参与8月更文挑战的第八天,活动详情查看:8月更文挑战
function Hello(props){
return(
<div>
{props.children}
</div>
)
}
<Hello>我是子节点</Hello>
const App = props=>{
console.log(props)
props.children()
return(
<div>
{props.children}
</div>
)
}
ReactDOM.render(<App>文本子节点</App>,document.getElementById('root'))
const App = props=>{
console.log(props)
props.children()
return(
<div>
{props.children}
</div>
)
}
ReactDOM.render(<App><p>我是p标签</p></App>,document.getElementById('root'))
const Test = ()=> <button>button组件</button>
// children 为文本节点
const App = props=>{
console.log(props)
props.children()
return(
<div>
{props.children}
</div>
)
}
ReactDOM.render(<App><Test/></App>,document.getElementById('root'))
const App = props=>{
console.log(props)
props.children()
return(
<div>
{props.children}
</div>
)
}
ReactDOM.render(<App>{
()=> console.log("object")
}</App>,document.getElementById('root'))
/**
* props 检验
*/
const App = props =>{
const arr = props.colors
const lis = arr.map((item,index)=><li key={index}>{item.name}</li>)
return <ul>{lis}</ul>
}
ReactDOM.render(<App colors={19}/>,document.getElementById('root'))
安装prop-types
npm install prop-types --save
或
yarn add prop-types
导入prop-types包
import PropTypes from 'prop-types';
使用组件名.propTypes = { } 来给组件的props添加校验规则
const App = props =>{
const arr = props.colors
const lis = arr.map((item,index)=><li key={index}>{item.name}</li>)
return <ul>{lis}</ul>
}
App.propTypes ={
colors:propTypes.array
}
ReactDOM.render(<App colors={19}/>,document.getElementById('root'))
虽然arr.map报错还在 但是控制台中给出了具体的错误提示。
ReactDOM.render(<App colors={['red','blue']}/>,document.getElementById('root'))
requiredFunc:PropTypes.func.isRequired,
App.propTypes ={
a:propTypes.number,
fn:propTypes.func.isRequired,
tag:propTypes.element,
filter:propTypes.shape({
area:propTypes.string,
price:propTypes.number
})
}
/**
* props 检验
*/
const App = props => {
return(
<div> {props.pageSize}</div>
)
}
App.defaultProps = {
pageSize: 10
}
ReactDOM.render(<App />, document.getElementById('root'))
当想传入值的时候,就以传入值为准。