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?
-
Component created with function
If you created your component as a
function
like we did here, all theprops
itsParent
passed down will be accessible through the argument. If you look at theChildren
above it's usingprops.textToDisplay
inside thediv
. All theprops
passed to theChildren
are passed as this singleprops
argument. For example, if theParent
had passed a props calleddefaultValue
, theChildren
would access it asprops.defaultValue
. -
Component created as React.Component
If you created your Component by extending
React.Component
then all theprops
would be available asthis.props
. The equivalent of aboveChildren
function usingReact.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 anobject
). - 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 thisprops
to be astring
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
andcity
- 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']
}