通过props接受jsx标签属性，可以创建多个不同组件实例
通过propTypes设置属性限制
通过defaultProps指定默认属性值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>类式组件</title>
</head>
<body>
<div id="test1"></div>
<div id="test2"></div>
<div id="test3"></div>
<script type="text/javascript" src="js/react.development.js"></script>
<script type="text/javascript" src="js/react-dom.development.js"></script> <script type="text/javascript" src="js/babel.min.js"></script>
<script type="text/babel">
class Person extends React.Component{
render(){
return (
<ul>
<li>姓名：{this.props.name}</li>
<li>性别：{this.props.sex}</li>
<li>年龄：{this.props.age}</li>
</ul>
)
}
}
// 标签属性限制
//isRequired 必传限制
Person.propTypes={
name:PropTypes.string.isRequired,
sex:PropTypes.string,
age:PropTypes.number,
speak:PropTypes.func //限制类型为function
}
//指定默认属性值
Person.defaultProps={
sex:'男',
age:18
}
ReactDOM.render(<Person name="jerry" age={22} sex="男" speak={speck}/>,document.getElementById('test1'))
ReactDOM.render(<Person name="pre" age={10} sex="女" />,document.getElementById('test2'))
const p={name="arry" age=30 sex="女"}
ReactDOM.render(<Person {...p} />,document.getElementById('test3'))
function speak(){
console.log('我说话了')
}
</script>
</body>
</html>
标签属性限制与属性默认值简写
将propTypes和defaultProps设置为class类的静态属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>类式组件</title>
</head>
<body>
<div id="test1"></div>
<div id="test2"></div>
<div id="test3"></div>
<script type="text/javascript" src="js/react.development.js"></script>
<script type="text/javascript" src="js/react-dom.development.js"></script> <script type="text/javascript" src="js/babel.min.js"></script>
<script type="text/babel">
class Person extends React.Component{
// 标签属性限制
//isRequired 必传限制
static propTypes={
name:PropTypes.string.isRequired,
sex:PropTypes.string,
age:PropTypes.number,
speak:PropTypes.func //限制类型为function
}
//指定默认属性值
static defaultProps={
sex:'男',
age:18
}
render(){
return (
<ul>
<li>姓名：{this.props.name}</li>
<li>性别：{this.props.sex}</li>
<li>年龄：{this.props.age}</li>
</ul>
)
}
}
ReactDOM.render(<Person name="jerry" age={22} sex="男" speak={speck}/>,document.getElementById('test1'))
ReactDOM.render(<Person name="pre" age={10} sex="女" />,document.getElementById('test2'))
const p={name="arry" age=30 sex="女"}
ReactDOM.render(<Person {...p} />,document.getElementById('test3'))
function speak(){
console.log('我说话了')
}
</script>
</body>
</html>
