持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第11天，点击查看活动详情
组件实例的三大核心属性之一 - props
基本使用
最基础的用法是通过外面的标签传递参数给类进行构建渲染。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 测试容器 -->
<div id="test"></div>
<div id="test2"></div>
<div id="test3"></div>
<!-- 加载 React 核心库 -->
<script type="text/javascript" src="../js/react.development.js"></script>
<!-- 加载 React DOM 用于支持 React 操作 DOM -->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!-- 加载 babel 用于将 jsx 转为 js -->
<script type="text/javascript" src="../js/babel.min.js"></script>
<!-- 设置类型为babel -->
<script type="text/babel">
// 创建组件
class Person extends React.Component{
render() {
const {name, age, sex} = this.props
return (
<ul>
<li>姓名：{name}</li>
<li>性别：{sex}</li>
<li>年龄：{age}</li>
</ul>
)
}
}
// 将组件渲染到页面
ReactDOM.render(<Person name='张三' sex='男' age='30'/>, document.getElementById('test'))
ReactDOM.render(<Person name='李四' sex='男' age='40'/>, document.getElementById('test2'))
const ww = {name:'王五', sex:'男', age:'50'}
ReactDOM.render(<Person {...ww}/>, document.getElementById('test3'))
</script>
</body>
</html>
对props进行限制
- 对标签属性进行类型鉴别
- 字符串
- 数值
- 函数
- 对标签属性进行必要性校验
- 对标签属性进行默认值赋值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 测试容器 -->
<div id="test"></div>
<div id="test2"></div>
<div id="test3"></div>
<!-- 加载 React 核心库 -->
<script type="text/javascript" src="../js/react.development.js"></script>
<!-- 加载 React DOM 用于支持 React 操作 DOM -->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!-- 加载 babel 用于将 jsx 转为 js -->
<script type="text/javascript" src="../js/babel.min.js"></script>
<!-- 加载 prop-types 用于对组件标签属性进行限制 -->
<script type="text/javascript" src="../js/prop-types.js"></script>
<!-- 设置类型为babel -->
<script type="text/babel">
// 创建组件
class Person extends React.Component{
render() {
const {name, age, sex} = this.props
return (
<ul>
<li>姓名：{name}</li>
<li>性别：{sex}</li>
<li>年龄：{age}</li>
</ul>
)
}
}
Person.propTypes = {
// React15及之前
// name: React.PropTypes.string
// 现在字符串类型，必填
name: PropTypes.string.isRequired,
// 限制字符串类型
sex: PropTypes.string,
// 限制数值类型
age: PropTypes.number,
// 限制函数
speak: PropTypes.func
}
Person.defaultProps = {
sex: '保密'
}
// 将组件渲染到页面
ReactDOM.render(<Person name='张三' sex='男' age={30} speak={speak}/>, document.getElementById('test'))
ReactDOM.render(<Person name='李四' sex='男' age={40}/>, document.getElementById('test2'))
const ww = {name:'王五', sex:'男', age:50}
ReactDOM.render(<Person {...ww}/>, document.getElementById('test3'))
function speak(){
console.log('说话')
}
</script>
</body>
</html>
