After learning the props attribute of vue, how to use the props attribute in react?
Basic use of props
Let's define a person component first
We want these three parameters to be passed in dynamically, how to achieve it?
Answer: Just like vue, just pass it directly where the component is referenced.
Print this in render, you can see that it has been passed
Use it in the person component
Passing props in batches
If there are too many attributes, it is very cumbersome for us to pass them through the above method, so how to pass them in batches?
Use the spread operator to achieve:
- The {} in { ...p } here is not the {} that deconstructs the assignment , but the {} that react uses to place variables . In fact, the real expression is only ...p , but according to the es6 syntax , the expansion operator of the object must be A layer of {} is included , because react.development.js and babel escaped the code to omit {}
- The { ...p } here does not mean destructuring assignment, but simply uses the variable expression p, which is only applicable to the transfer of tag attributes
The use of props in class components
Question 1: How can we add one year to the age we want?
If we pass parameters in this way and want to add 1 to the age
Some people say, just add 1 directly
Look at the effect, it becomes string splicing. So how to pass numbers?
Curly braces should be added, so that react will read the contents inside the curly braces (remember in vue, vue adds a colon to the variable name, which means reading variables, such as: age="20" ) ,
This is normal.
Question 2: How do we restrict the type of props attribute? In order to avoid irregular parameter passing when others use it.
Before react V15.5, the way to restrict props was:React.PropTypes
After react V15.5, the way to restrict props is:1、需要引入prop-types库 2、调用PropTypes
As you can see, when our age is passed in a string, an error will be reported
Question 3: How to limit whether parameters must be passed?
It's very simple, just add the .isRequired keyword after the restriction type
If the age is not passed, an error will be reported
Question 4: How can we set a default value when the age is not passed?
Add the defaultProps attribute to the component to set the default value
In this way, when the age is not passed, it will not report an error
Question 5: How to pass a function?
If we pass a speak function
It can be seen that it is feasible. It should be noted that the setting of the function type is func instead of function
Note: The props attribute is read-only and cannot be modified
Question 6: How to simplify props?
Because in the code just now, we found that the processing of props is two separate modules, and the code is not simplified enough . It is better to put the processing of props into the class class, so that everything related to the component is in the class. Convenience for later maintenance
Modify it as follows, write it in the class, and add the static keyword (remember that in the previous knowledge about the class, static means adding a static attribute or method to the class itself. If you don’t add static, it will be added to the instance object) , it can be realized
Question 7: What is the function of the props received by the constructor in the class?
Whether the constructor receives props and whether it is passed to super depends on: whether you want to access props through this in the constructor
(This situation hardly exists. In the constructor, we can directly access props instead of this.props, so in actual development, the constructor can be omitted if it can be omitted, and it has little effect)
Use of props in functional components
Question There is no this in functional components, so how to get the value of the props attribute?
His own function can receive props parameters, which can be used directly in jsx
If you want to limit the parameters, you can’t write it in the function, you can only put it outside, just add propTypes and defaultProps attributes to the component itself, as shown in the figure below
Note: Functional components have relatively large limitations. He can only use props. For example, the state attribute in the previous article does not exist in him, and the refs attribute to be discussed in the next article is also unusable. But class components have these three properties .