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>
<!-- react核心库 -->
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<!-- react-dom 用于操作dom -->
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<!-- jsx 转义成js -->
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<script src="./prop-types.js"></script>
</head>
<body>
<div id='app'></div>
<script type="text/babel">
class Demo extends React.Component {
constructor(props) {
super(props)
console.log(props) //{name: "aa", genger: "aaa", age: 18}
}
render() {
const { name } = this.props
return (
<h1>{name}</h1>
)
}
}
ReactDOM.render(
<Demo name='aa' genger='aaa' age={20} />, document.getElementById('app'))
</script>
</body>
</html>
子组件如未接收到父组件传递过来的值,可以用 static defaultProps自定义默认值
<!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>
<!-- react核心库 -->
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<!-- react-dom 用于操作dom -->
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<!-- jsx 转义成js -->
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<script src="./prop-types.js"></script>
</head>
<body>
<div id='app'></div>
<script type="text/babel">
class Demo extends React.Component {
constructor(props) {
super(props)
console.log(props) //{name: "aa", genger: "aaa", age: 18}
}
static defaultProps = {
name: '默认值'
};
render() {
const { name } = this.props
return (
<h1>{name}</h1>
)
}
}
ReactDOM.render(
<Demo genger='aaa' age={20} />, document.getElementById('app'))
</script>
</body>
</html>
propTypes限制父组件传递的值类型,以及要求
- 下载yarn add prop-types
- PropTypes.string/bool/number/func/obj/symbol/等限制格式
- propTypes.isRequired必填项
<!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>
<!-- react核心库 -->
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<!-- react-dom 用于操作dom -->
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<!-- jsx 转义成js -->
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<script src="./prop-types.js"></script>
</head>
<body>
<div id='app'></div>
<script type="text/babel">
class Demo extends React.Component {
constructor(props) {
super(props)
console.log(props) //{name: "aa", genger: "aaa", age: 18}
}
render() {
return (
<h1>hello</h1>
)
}
}
Demo.propTypes = {
name: PropTypes.string.isRequired, //isRequired必须传入
age: PropTypes.number,
genger: PropTypes.string
}
Demo.defaultProps = {
age: 18
}
ReactDOM.render(
<Demo name='aa' genger='aaa' age={20} />, document.getElementById('app'))
</script>
</body>
</html>
react 脚手架中使用
/*安装npm install --save prop-types*/
import React from 'react'
import PropTypes from 'prop-types'
export default class DefalutVal extends React.Component {
static defaultProps = {
title: '默认值'
};
/*yarn add prop-types 下载 传参属性规则
prop-types插件
propTypes.isRequired必须传递
PropTypes.string/bool/number/func/obj/symbol/node(元素节点)/element(jsx元素)/instanceof(xx)必须某个实例/oneOf([x1],[x2])多个中的一个等
*/
static propTypes = {
title: PropTypes.number //必须传入字符串 不符合规则控制台报错,页面正常渲染
}
constructor(props) {
super(props)
}
render() {
return (
<div>{this.props.title}</div>
)
}
}