1.属性的定义
props 是正常是外部传入的，组件内部也可以通过一些方式来初始化的设置，属性不能被组件自己更 改，但是你可以通过父组件主动重新渲染的方式来传入新的 props。 这就是React中的单向数据流2.属性的特点
属性是描述性质、特点的，组件自己不能随意更改，必须由父组件进行更改3.属性的用法
在使用一个组件的时候，可以把参数放在标签的属性当中，所有的属性都会作为组件 props 对象的键值。 通过类创建的组件需要使用this.props来使用属性import React, { Component } from 'react'
import Navbar from './Navbar'
export default class App extends Component {
state = {
//只能内部自己使用，外部无法改变
}
render() {
//上面父组件传来的一个对象
var obj = {
title: '测试',
leftshow: false
}
return (
<div>
<h2>首页</h2>
<Navbar title="首页" leftshow={false} ></Navbar>
<h2>列表</h2>
<Navbar title="列表" leftshow={true} rightshow={true}></Navbar>
<h2>购物车</h2>
{/* 如果对象里面的属性和组件的属性key一样可以用拓展运算符直接结构obj放入组件 */}
<Navbar title="购物车" {...obj}></Navbar>
</div>
)
}
}
import React, { Component } from 'react'
import propTypes from "prop-types"
export default class Navbar extends Component {
//a=100对象属性
state = {
//只能内部自己使用，外部无法改变
}
//用static修饰属性就是类属性
static propTypes = {
title: propTypes.string,
leftshow: propTypes.bool,
rightshow: propTypes.bool,
}
//用static修饰属性就是类属性
static defaultProps = {
//属性默认值
leftshow: true,
rightshow: true,
title: ''
}
//属性是父组件传过来的，this.props
render() {
console.log(propTypes)
let { title, leftshow, rightshow } = this.props
return (
<div style={{ display: 'flex' }}>
{leftshow && <button>返回</button>}
{/* <div>{ this.props.title}</div> */}
<div>{title}</div>
{rightshow && <button>Home</button>}
</div>
)
}
}
// Navbar.defalutProps={
// leftshow:false,
// rightshow:true,
// title:''
// }
/* Navbar.propTypes = {
title: propTypes.string,
leftshow: propTypes.bool,
rightshow: propTypes.bool,
} *///类属性
/*
给组件类加上一个propTypes属性在里面使用prop-types模块封装好的方法即可
验证属性
*/
通过函数创建的组件，需要通过函数的参数来接收 props
import React, { Component } from 'react'
import Navbar from './Navbar'
import Sidebar from './Sidebar'
export default class App extends Component {
render() {
return (
<div>
{/* 类组件 */}
<Navbar title="导航"></Navbar>
{/* 函数式组件 */}
<Sidebar bg="yellow" position="left"></Sidebar>
</div>
)
}
}
import React from 'react'
import propTypes from "prop-types"
export default function Sidebar(props) {
console.log(props)
let { bg, position } = props
let obj = { backgroundColor: bg, position: "fixed" }
let obj1 = { right: 0 }
let obj2 = { left: 0 }
// eslint-disable-next-line eqeqeq
position == 'right' ? obj = { ...obj1, ...obj } : obj = { ...obj2, ...obj }
return (
<div style={obj}>
<ul>
<li>11111</li>
<li>11111</li>
<li>11111</li>
<li>11111</li>
<li>11111</li>
<li>11111</li>
<li>11111</li>
<li>11111</li>
</ul>
</div>
)
}
//Sidebar.defaultProps 默认属性
Sidebar.defaultProps = {
bg: 'red',
position: 'fixed'
}
//Sidebar.propTypes 属性验证
Sidebar.propTypes = {
bg: propTypes.string,
position: propTypes.string
}
注意： 1).注意在传参数时候，如果写成isShow="true" 那么这是一个字符串 如果写成isShow={true} 这个 是布尔值 2).当你想要传递的属性key和value名字一致时，可以使用ES6的解构语法来快速赋值{...对象} 3)设置属性默认值，可以给属性设置默认值，当父组件没有传递属性时，子组件中会采用设置的默认值来使用。 在类组件和函数组件中设置属性默认值的方法是不同的 在类组件中，通过类属性defaultProps可以给属性设置默认值
//用static修饰属性就是类属性
static defaultProps = {
//属性默认值
leftshow: true,
rightshow: true,
title: ''
}
在函数组件中，通过 函数名.defaultProps来设置属性的默认值
import React from 'react'
export default function Sidebar(props) {
console.log(props)
let { bg, position } = props
let obj = { backgroundColor: bg, position: "fixed" }
let obj1 = { right: 0 }
let obj2 = { left: 0 }
// eslint-disable-next-line eqeqeq
position == 'right' ? obj = { ...obj1, ...obj } : obj = { ...obj2, ...obj }
return (
<div style={obj}>
<ul>
<li>11111</li>
<li>11111</li>
<li>11111</li>
<li>11111</li>
<li>11111</li>
<li>11111</li>
<li>11111</li>
<li>11111</li>
</ul>
</div>
)
}
//Sidebar.defaultProps 默认属性
Sidebar.defaultProps={
bg:'red',
position:'fixed'
}
4).设置属性的类型验证，可以通过设置属性的类型验证来限制属性的类型。
注意在进行类型验证时需要先导入React自带的prop-types
import propTypes from "prop-types"
同样类组件是通过静态属性propTypes来设置类型验证
static propTypes = {
title: propTypes.string,
leftshow: propTypes.bool,
rightshow: propTypes.bool,
}
函数组件是通过组件名.propTypes来设置类型验证
import React from 'react'
import propTypes from "prop-types"
export default function Sidebar(props) {
console.log(props)
let { bg, position } = props
let obj = { backgroundColor: bg, position: "fixed" }
let obj1 = { right: 0 }
let obj2 = { left: 0 }
// eslint-disable-next-line eqeqeq
position == 'right' ? obj = { ...obj1, ...obj } : obj = { ...obj2, ...obj }
return (
<div style={obj}>
<ul>
<li>11111</li>
<li>11111</li>
<li>11111</li>
<li>11111</li>
<li>11111</li>
<li>11111</li>
<li>11111</li>
<li>11111</li>
</ul>
</div>
)
}
//Sidebar.defaultProps 默认属性
Sidebar.defaultProps = {
bg: 'red',
position: 'fixed'
}
//Sidebar.propTypes 属性验证
Sidebar.propTypes = {
bg: propTypes.string,
position: propTypes.string
}
标签：obj,16,11111,React,propTypes,props,组件,属性 From： https://www.cnblogs.com/SadicZhou/p/17807536.html