ReactNative Day4

download the tutorial file: using the QX
🖱️🈯👈
the referance props

76561198976121435
测试jsdeliver github图床
这厮原文地址：
https://www.cnblogs.com/starry-skys/p/13905766.html

JSX

Well then how do we pass these values to a component from outside? That's where props comes in. In React lingo, props is something that the component is passed by the user of that component (parent component passes props to child component).
You can pass anything as a prop: function, object, boolean, string, number, etc. Here's an example of a Component passing the props to its children.

```jsx
function Children(props) {
    return (
        <div>{props.textToDisplay}</div>
    )
}

function Parent(props) {
    return (
        <Children textToDisplay={'Hello'}></Children>
//实际就是把'Hello'这个传进去，传给textToDisplay这个
//变量给Children然后Children就返回一个<div>这个属性。

    )
}

There are couple things going on here. First - remember on the first page of this tutorial we said that we can compose components (we can use one component inside the other)? Well that's what we are doing here. Parent component uses Children component inside it's return.

There are couple things going on here.
First - remember on the [first page of this tutorial] we said that we can compose components (we can use one component inside the other)? Well that's what we are doing here. Parent component uses Children component inside it's return.

Second - if you inspect the above code snippet carefully, we see that when the Parent uses the Children (inside return) it's also passing something called textToDisplay with some value Hello. We call this "passing the props". So Parent is passing a props called textToDisplay to the Children. How, then, does the Children use the value that the Parent passes down to it?

1. Component created with function

   If you created your component as a function like we did here, all the props its Parent passed down will be accessible through the argument. If you look at the Children above it's using props.textToDisplay inside the div. All the props passed to the Children are passed as this single props argument. For example, if the Parent had passed a props called defaultValue, the Children would access it as props.defaultValue.

2. Component created as React.Component

   If you created your Component by extending React.Component then all the props would be available as this.props. The equivalent of above Children function using React.Component would look like this:

class Children extends React.Component {
    render(){
        return (
            <div>{this.props.textToDisplay}</div>
        )
    }
}

One thing you must remember regarding props is that you should never mutate props （不要篡改传进来的props参数）不然会报错。- React will complain if you do. This is something given to the component by it's parent - accept with love and don't try to mess around with things to make your parent angry!

function Children(props) {
    //❌  NEVER DO THIS
    props.textToDisplay = 'I want to mutate props'
    return (
        <div>{props.textToDisplay}</div>
    )
}

Props类型

最好指清楚Props类型，包括数据结构，数据类型，

• React can enforce type checking to avoid many bugs arising from parents passing props with a type that's different from what the children expects (ex. parent passing string when children expects an object).
• If you are writing components that will be used by different people at different parts of the application, it's always useful for those users to know what are the props they can pass, what is the expected structure of the props etc.

如何定义Props类型：

import React from 'react';
import PropTypes from 'prop-types';

class SoftwareEngineer extends React.Component {
    render(){
        return (...)
    }
}

//defines "propTypes" property in this component
SoftwareEngineer.propTypes = {
    name: PropTypes.string.isRequired, //expects string and is required,这个类型是string，而且是必须的。
    hobbies: PropTypes.arrayOf(PropTypes.string), //expects array of string 期待类型是string数组。
    address: PropTypes.shape({
        street: PropTypes.string,
        city: PropTypes.string
    }) //must be an object with 'street' and 'city' fields
}

All props are optional (user of the component doesn't have to pass them) except the one that has .isRequired. Here's a quick explanation on three props defined above:

• name - It expects the value of this props to be a string and it's required because, well, it has .isRequired.
• hobbies - It's optional but if passed it must be an array of strings.
• address - It's also optional but if passed it must be an object with two fields - street and city - and both must be string.

Default Props

In some cases you might want to define a default value for a props in case it is not passed to you.
You can use defaultProps property to define your defaults. With this you're basically saying - "if someone doesn't pass me a value for a props that I'm expecting, then I want the value of that props to be what I have defined in the defaultProps". For example - for the above component we can define defaultProps as follows:

import React from 'react';
import PropTypes from 'prop-types';

class SoftwareEngineer extends React.Component {
    render(){
        //if this props is not passed, it will print default value as defined by `defaultProps`
        console.log(this.props.hobbies);

        //if this props is not passed, it will print `undefined` because we haven't defined any default value for this props
        console.log(this.props.address);
        return (...)
    }
}

//defines "defaultProps" property in this component
SoftwareEngineer.defaultProps = {
    hobbies: ['Writing React code']
}