将 Props 传递给组件
React 组件使用 props 来互相通信。每个父组件都可以提供 props 给它的子组件，从而将一些信息传递给它。可以通过它们传递任何 JavaScript 值，包括对象、数组和函数。
基本使用
<script type="text/babel">
// 基本使用
class Preson extends React.Component {
render() {
console.log(this);
return (
<ul>
<li>姓名：{this.props.name}</li>
<li>年龄: {this.props.age}</li>
<li>性别: {this.props.sex}</li>
</ul>
)
}
}
//1.基础用法
// ReactDOM.render(<Preson name="tome" age="18" sex="男" />, document.getElementById("App"))
const obj = {name: 'zhangsan', age: 18, sex: '女'}
//2.使用对象赋值
// ReactDOM.render(<Preson name={obj.name} age={obj.age} sex={obj.sex} />, document.getElementById("App"))
//3.批量传递 对象名要和类中使用的变量名一样 否则不生效
ReactDOM.render(<Preson {...obj} />, document.getElementById("App"))
console.log(...[1, 2, 3]); // 1,2,3
console.log(...obj); // 空
console.log({...obj}); // 新对象
// 扩展运算符在数组上使用 是展开数组 当字面量对象使用时 要用 {}包裹对象 是复制一个新对象
// 在这里使用 {} 是react 语法 不是复制对象 是react内置方法帮我们转化了
</script>
React组件的props被用于接收父组件传递过来的数据，props可以被认为是React组件与父组件之间的通信机制。父组件可以通过props将数据传递给子组件，并且子组件可以通过props访问这些数据。在React中，父组件可以通过props向子组件传递任何类型的数据，包括数字、字符串、对象、函数等。子组件可以使用props来渲染UI，并且可以在任何时候通过props接收新的数据。通过props，React组件之间可以实现数据的传递和共享，从而实现组件的复用和组合。
对props进行限制
<body>
<div id="App"></div>
</body>
<script src="../../React-js/react.development.js" type="text/javascript"></script>
<script src="../../React-js/react-dom.development.js" type="text/javascript"></script>
<script src="../../React-js/babel.min.js" type="text/javascript"></script>
<!--引入对于组件标签的限制-->
<script src="../../React-js/prop-types.js"></script>
<script type="text/babel">
// 对props 进行限制
class Preson extends React.Component {
render() {
const {name,age,sex} = this.props
return (
<ul>
<li>姓名：{name}</li>
<li>年龄: {age+1}</li>
<li>性别: {sex}</li>
</ul>
)
}
}
// 没有传name会报错 对标签类型进行指定限制
Preson.propTypes = {
name:PropTypes.string.isRequired // 指定是字符串类型的数据
}
// 默认值 没有传递时使用默认值
Preson.defaultProps = {
sex:'无性别',
age:20
}
const obj = { name:'zhangsan'}
//3.批量传递 对象名要和类中使用的变量名一样 否则不生效
ReactDOM.render(<Preson {...obj} />, document.getElementById("App"))
</script>props的简写方式
<script type="text/babel">
// 对props 的简写方式
class Preson extends React.Component {
// 在React类式组件中，static关键字可以用来定义静态属性或静态方法。
// 静态属性和静态方法是直接绑定到类本身，而不是类的实例。
// 在组件中，可以使用static关键字来定义静态属性或静态方法，
// 这些静态成员可以在类的实例化过程中被访问，而不需要创建类的实例。
// 在React类式组件中，static关键字通常用于定义静态方法，
// 用来完成一些和组件实例无关的操作，例如工具方法、常量等。
// 静态方法可以直接通过类名来调用，而不需要创建类的实例。
static propTypes = {
name: PropTypes.string.isRequired
}
static defaultProps = {
sex: '无性别',
age: 20
}
render() {
const {name, age, sex} = this.props
return (
<ul>
<li>姓名：{name}</li>
<li>年龄: {age + 1}</li>
<li>性别: {sex}</li>
</ul>
)
}
}
// 默认值 没有传递时使用默认值
const obj = {name: 'zhangsan'}
//3.批量传递 对象名要和类中使用的变量名一样 否则不生效
ReactDOM.render(<Preson {...obj} />, document.getElementById("App"))
</script>props构造器
在 constructor 中，需要在其他的声明之前调用 super(props)。如果你不这样做，this.props 在 constructor 运行时就会为 undefined，这可能会造成困惑并且导致错误。
class Preson extends React.Component {
constructor(props) {
super(props)
console.log(this.props);
}
render() {
const {name,age,sex} = this.props
return (
<ul>
<li>姓名：{name}</li>
<li>年龄: {age+1}</li>
<li>性别: {sex}</li>
</ul>
)
}
}总结：构造器是否接收props 是否传递给super 取决于：是否希望在构造器中通过this访问props
函数中props
function Preson(props) {
return (
<ul>
<li>姓名：{props.name}</li>
<li>年龄: {props.age + 1}</li>
<li>性别: {props.sex}</li>
</ul>
)
}
// 没有传name会报错 对标签类型进行指定限制
Preson.propTypes = {
name: PropTypes.string.isRequired // 指定是字符串类型的数据
}
// 默认值 没有传递时使用默认值
Preson.defaultProps = {
sex: '无性别',
age: 20
}
const obj = {name: 'zhangsan'}
//3.批量传递 对象名要和类中使用的变量名一样 否则不生效
ReactDOM.render(<Preson {...obj} />, document.getElementById("App"))总结
- 每个组件对象都有 props 属性
- 组件标签的所有属性都保存在props中
- 通过标签属性从组件外向组件内传递变化的数据
- 组件内部不要修改props数据(props 是只读的)
