The main difference between state and props is that props is immutable and state can be changed based on interaction with the user. This is why some container components need to define the state to update and modify the data. Subprojects can only pass data through props.
Use Props
The following example demonstrates how to use props in a component:
React instance
Var HelloMessage = React . CreateClass ( {
Render : function ( ) {
Return < h1 > Hello { This . Props . Name } </ h1 >; }
} ) ; ReactDOM . Render ( < HelloMessage Name = " Runoob " />, document . GetElementById ( ' example ' )
try it"
The name attribute in the instance is obtained by this.props.name.
Default Props
You can set the default value for props with the getDefaultProps () method, as follows:
React instance
Var HelloMessage = React . CreateClass ( {
GetDefaultProps : function ( ) {
Return {
Name : ' Runoob '
} ; } , Render : function ( ) {
Return < h1 > Hello { This . Props . Name } </ h1 >; }
} ) ; ReactDOM . Render ( < HelloMessage />, document . GetElementById ( ' example ' )
) ;
try it"
State and Props
The following example demonstrates how to combine state and props in an application. We can set the state in the parent component and pass it on the subcomponent using props on the subcomponent. In the render function, we set the name and site to get the data passed by the parent.
React instance
Var WebSite = React . CreateClass ( {
GetInitialState : function ( ) {
Return {
Name : " rookie tutorial " , site : " http://www.runoob.com "
} ; } , Render : function ( ) {
Return ( < Div > < Name Name = { this . State . Name } /> < Link Site = { this . State . Site } /> </ div > ) ; }
} ) ; Var Name = React . CreateClass ( {
Render : function ( ) {
Return ( < H1 > { this . Props . Name } </ h1 > ) ; }
} ) ; Var Link = React . CreateClass ( {
Render : function ( ) {
Return ( < A Href = { this . Props . Site } > { this . Props . Site } </ a > ) ; }
} ) ; ReactDOM . Render ( < WebSite />, document . GetElementById ( ' example ' )
) ;
try it"
Props validation
Props validation uses propTypes , which ensures that our application components are used correctly. React.PropTypes provides a lot of validators to verify that incoming data is valid. The JavaScript console will throw a warning when invalid data is passed to props.
The following example creates a Mytitle component, the attribute title is a must and is a string, and if it is a number,
React instance
Var Title = " rookie tutorial " ; // var title = 123;
Var MyTitle = React . CreateClass ( {
PropTypes : {
Title : React . PropTypes . String . IsRequired , } , render : function ( ) {
Return < h1 > { this . Props . Title } </ h1 >; }
} ) ; ReactDOM . Render ( < MyTitle Title = { title } />, document . GetElementById ( ' example ' )
) ;
try it"
If the title uses a numeric variable, the console will display the following error message:
More validators are described below:
React . CreateClass ( {
PropTypes : {
// can declare prop for the specified JS base data type, by default, these data are optional
OptionalTray : React . React . React . React . PropTypes . String , // () () () () () () () () () () Objects that can be rendered numbers, strings, elements, or arrays
OptionalNode : React . PropTypes . Node , // React element
OptionalElement : React . PropTypes . Element , // Declare prop as an instance of class with the instanceof operator of JS.
EgMessage : React . PropTypes . InstanceOf ( Message ) , // Use enum to limit prop to accept only specified values.
OptionalEnum : React . PropTypes . OneOf ( [ ' News ' , ' Photos ' ] ) , // can be one of multiple object types
OptionalUnion : React . PropTypes . OneOfType ( [
React . PropTypes . String , React . PropTypes . Number , React . PropTypes . InstanceOf ( Message )
] ) , // specify an array of types
OptionalArrayOf : React . PropTypes . ArrayOf ( React . PropTypes . Number ) , // Specifies the type of object
OptionalObjectOf : React . PropTypes . ObjectOf ( React . PropTypes . Number ) , // object with specific shape parameters
OptionalObjectWithShape : React . PropTypes . Shape ( {
Color : React . PropTypes . String , fontSize : React . PropTypes . Number
} ) , // any type plus `isRequired` to make prop not empty.
RequiredFunc : React . PropTypes . Func . IsRequired , // Any type that can not be empty
RequiredAny : React . PropTypes . Any . IsRequired , // Custom Validator . If the validation fails, you need to return an Error object. Do not use `console.warn` directly or throw an exception because` `oneOfType` will fail.
CustomProp : function ( props , propName , componentName ) {
If ( ! / Matchme /. Test ( props [ propName ] ) ) {
Return New Error ( ' Validation failed! ' ) ; }
}
} , / * ... * /
} ) ;
EmoticonEmoticon