props的详情解释
props是组件自身的属性，一般用于嵌套的内外层组件中，负责传递信息（通常由父层组件向子层组件传递）
我个人理解,该属性的值是在父组件中引用子组件时候指定的,该属性是子组件中定义的,比如新建一个苹果组件,苹果有颜色的属性,在构建这个组件的时候,指定一个color属性,在父组件使用的时候再指定一个具体的颜色值,那么最后子组件就会拿到这个值,显示相应颜色的苹果.
如何使用props
新建一个苹果组件 AppleComponent,并且使用props中的一个属性apple_color属性
import React, { Component } from 'react';
import { Text, View } from "react-native";
export default class AppleComponent extends Component{
constructor(props){
super(props);
}
render(){
return(
<View>
<Text>我是一个{this.props.apple_color}的苹果组件</Text>
</View>
)
}
}
在父组件中导入该组件并且将子组件需要的props属性传递给子组件
import React, { Component } from 'react';
import { View } from 'react-native';
import AppleComponent from './AppleComponent';
export default class HelloWorldApp extends Component {
render() {
return (
<View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
<AppleComponent apple_color='red'/>
</View>
);
}
}
默认属性以及它的作用
在子组件中可以定义一个默认的props属性，有可能父组件并没有传递这个子组件需要的props属性，所以最好设置一个默认的属性
当父组件没有传递指定属性，子组件也没有声明默认属性，那么就是空的，不会报错
在子组件中声明默认的props属性，当父组件没有传递指定属性的时候，子组件读取默认的props值
import React, { Component } from 'react';
import { Text, View } from "react-native";
export default class AppleComponent extends Component{
constructor(props){
super(props);
}
static defaultProps = {
apple_color: 'blue'
}
render(){
return(
<View>
<Text>我是一个{this.props.apple_color}的苹果组件</Text>
</View>
)
}
}
对props进行约束和检查
对于比较新的版本需要独立安装prop-types 库
npm install --save prop-types
然后在需要使用的js文件中引入这个prop-types 库
import PropTypes from 'prop-types';
随着项目的增大，那么某个组件中的props类型就要进行一定的约束和检查，传递进来的类型是否正确,如果不正确，运行的时候会给出黄色的警告,如下：子组件需要的是一个string类型的props，但是父组件传递的是array
import React, { Component } from 'react';
import { View } from 'react-native';
import AppleComponent from './AppleComponent';
export default class HelloWorldApp extends Component {
render() {
return (
<View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
<AppleComponent apple_color={[23,4]}/>
</View>
);
}
}
import React, { Component } from 'react';
import { Text, View } from "react-native";
import PropTypes from 'prop-types'
export default class AppleComponent extends Component{
constructor(props){
super(props);
}
static defaultProps = {
apple_color: 'blue'
}
static propTypes = {
apple_color: PropTypes.string.isRequired // isRequired表示必须传递
}
render(){
return(
<View>
<Text>我是一个{this.props.apple_color}的苹果组件</Text>
</View>
)
}
}
props约束报错.png
props使用技巧之三点运算符和解构赋值
如果父组件传递的是一个对象或者数组，那么子组件中接收的时候可以通过解构赋值的方式来获取到对象的每个属性或者数组中的每个元素
三点运算符
下面代码就是讲AppleMessage这个对象的所有属性都传递给子组件
import React, { Component } from 'react';
import { View } from 'react-native';
import AppleComponent from './AppleComponent';
export default class HelloWorldApp extends Component {
render() {
var AppleMessage = {
name: '富士康',
color: 'red'
}
return (
<View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
<AppleComponent {...AppleMessage}/>
</View>
);
}
}
import React, { Component } from 'react';
import { Text, View } from "react-native";
import PropTypes from 'prop-types'
export default class AppleComponent extends Component{
constructor(props){
super(props);
}
static defaultProps = {
name: '富士康',
color: 'red',
address: '北京'
}
static propTypes = {
AppleMessage: PropTypes.object.isRequired
}
render(){
return(
<View>
<Text>我是一个{this.props.name}的苹果组件</Text>
<Text>我是一个{this.props.color}的苹果组件</Text>
<Text>我是一个{this.props.address}的苹果组件</Text>
</View>
)
}
}
三点运算符.png
解构赋值
import React, { Component } from 'react';
import { View } from 'react-native';
import AppleComponent from './AppleComponent';
export default class HelloWorldApp extends Component {
render() {
var AppleMessage = {
name: '富士康',
color: 'red',
address: '北京'
}
var {name, address} = AppleMessage
return (
<View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
<AppleComponent name={name} address={address}/>
</View>
);
}
}
import React, { Component } from 'react';
import { Text, View } from "react-native";
import PropTypes from 'prop-types'
export default class AppleComponent extends Component{
constructor(props){
super(props);
}
static defaultProps = {
name: '富士康',
color: 'red',
address: '北京'
}
static propTypes = {
AppleMessage: PropTypes.object.isRequired
}
render(){
return(
<View>
<Text>我是一个{this.props.name}的苹果组件</Text>
<Text>我是一个{this.props.color}的苹果组件</Text>
<Text>我是一个{this.props.address}的苹果组件</Text>
</View>
)
}
}
解构赋值.png
State的详情解释
我们使用两种数据来控制一个组件：props和state。props是在父组件中指定，而且一经指定，在被指定的组件的生命周期中则不再改变。 对于需要改变的数据，我们需要使用state。
一般来说，你需要在constructor中初始化state（译注：这是ES6的写法，早期的很多ES5的例子使用的是getInitialState方法来初始化state，这一做法会逐渐被淘汰），然后在需要修改时调用setState方法。
设置一个组件的默认state
import React, { Component } from 'react';
import { Text, View } from "react-native";
export default class AppleComponent extends Component{
constructor(props){
super(props);
this.state = {
size: 80
}
}
render(){
return(
<View>
<Text>我是一个size为{this.state.size}的苹果组件</Text>
</View>
)
}
}
另外一种写法
import React, { Component } from 'react';
import { Text, View } from "react-native";
export default class AppleComponent extends Component{
state = {
size: 80
}
constructor(props){
super(props);
}
render(){
return(
<View>
<Text>我是一个size为{this.state.size}的苹果组件</Text>
</View>
)
}
}
修改state状态setState
如下面代码，每次点击这段文字的时候size的值都会增加10
import React, { Component } from 'react';
import { Text, View } from "react-native";
export default class AppleComponent extends Component{
state = {
size: 80
}
constructor(props){
super(props);
}
render(){
return(
<View>
<Text onPress={() => {
this.setState({
size: this.state.size + 10
})
}}>我是一个size为{this.state.size}的苹果组件</Text>
</View>
)
}
}
ref的详细解释
在一个子组件中添加一个获取state属性的方法
import React, { Component } from 'react';
import { Text, View } from "react-native";
export default class RefTest extends Component{
state = {
size: 80
}
constructor(props){
super(props);
}
getSize(){
return this.state.size
}
render(){
return(
<View>
<Text onPress={() => {
this.setState({
size: this.state.size + 10
})
}}>我是一个苹果组件</Text>
</View>
)
}
}
父组件中使用ref绑定子组件，然后调用子组件中的getSize方法
import React, { Component } from 'react';
import {Text, View} from 'react-native';
import RefTest from './RefTest';
export default class HelloWorldApp extends Component {
state = {
size: 0
}
render() {
return (
<View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
<Text
onPress={() => {
var size = this.refs.reftest.getSize() // 或者this.refs['reftest'].getSize()
this.setState({
size: size
})
}}>size为{this.state.size}</Text>
<RefTest ref='reftest' />
</View>
);
}
}
或者使用下面这种方式获取绑定的组件
import React, { Component } from 'react';
import {Text, View} from 'react-native';
import RefTest from './RefTest';
export default class HelloWorldApp extends Component {
state = {
size: 0
}
render() {
return (
<View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
<Text
onPress={() => {
var size = this.reftest.getSize()
this.setState({
size: size
})
}}>size为{this.state.size}</Text>
<RefTest ref = {reftest => this.reftest = reftest} />
</View>
);
}
}
