The use of props in react native

The use of props in react native

First, the use of props

1: The way the parent component is passed

In the child component, you can use this.props to access the value passed by the parent component

<View>
        <Text>
                {this.props.name}
         </Text>
                
 </View>

The parent component defines the passed value　

<MyComponent name ='Akari' />

2: The child component defines default props (used when the parent component does not pass a value)

static defaultProps = {
        name: 'Little Red'
}

　　

Second, props type check

In order to keep the type accurate when passing values ​​to other components, type checking is required.

First import PropTypes

import propTypes from 'prop-types'

Note : propTypes have been removed from react and need to be imported separately. npm install prop-types download dependencies. The p at the beginning of propTypes does not need to be capitalized.

then define type checking

static propTypes = {
        name: propTypes.number,
}

1: The property is the specified JavaScript base type:

Properties: PropTypes.array,
Properties: PropTypes.bool,
Properties: PropTypes.func,
Properties: PropTypes.number,
Properties: PropTypes.object,
Properties: PropTypes.string,

2: The property is required to be a renderable node

Attribute: PropTypes.node,

3: Requires the property to be a React element

Property: PropTypes.element

4: The property is required to be an instance of a specified class

属性: PropTypes.instanceOf(NameOfAClass),

5: Require attribute values ​​to be specific values

属性: PropTypes.oneOf(['value1', 'value2'])

6: The required attribute can be any of the specified types

属性: PropTypes.oneOfType ([
  PropTypes.bool,
  PropTypes.number,
  PropTypes.instanceOf(NameOfAClass),
])

7: The property is required to be an array of the specified type

属性: PropTypes.arrayOf (PropTypes.number)

8: Requires the property to be an object with specific member variables

属性: PropTypes.objectOf (PropTypes.number)

9: Requires a property to be an object that specifies how to form it

Properties: PropTypes.shape({
  color: PropTypes.string,
  fontSize: PropTypes.number,
}),

10: Properties can be of any type

Property: PropTypes.any

11: Any of the 10 syntaxes described above can be declared as required by appending isRequired .

属性: PropTypes.array.isRequired,
属性: PropTypes.any.isRequired,
属性: PropTypes.instanceOf(NameOfAClass).isRequired,

　　

3. Spread operator and destructuring assignment

1: Spread operator

If the parent component needs to pass multiple parameters, and these parameters are stored in an object, we can use the spread operator to pass the value.

render() {
    let params = {
      name : 'Xiaohong',
      age: 11
    }
    return (
      <View>
        <MyComponent {...params}/>
        
      </View>
    );
  }

2: Destructuring assignment

When we only need to take part of the properties in the object and pass

render() {
    let params = {
      name : 'Xiaohong',
      age: 12,
      sex: 'male'
    }
    let {name, age} = params
    return (
      <View>
        <MyComponent name={name} age={age}/>
      </View>
    );
  }