React Props
state and props the main difference is that props is immutable, and state it can be changed according to the interaction with the user. This is why some container components need to be defined state to update and modify the data. And subcomponents can only pass through the props to transmit data.
Use Props
The following example shows how to use the props :
React instance
functionHelloMessage(props){return<h1>Hello{props.name}!</h1>;}constelement=
<HelloMessagename="Runoob"/>;ReactDOM.render(element,document.getElementById('example'));
In the instance name property through the props.name to get.
Default Props
You can use the component class’s defaultProps the property is props set the default value. Examples are as follows:
React instance
classHelloMessageextendsReact.Component{render(){return(<h1>Hello,{this.props.name}</h1>);}}HelloMessage.defaultProps={name:'Runoob'};constelement=
<HelloMessage/>;ReactDOM.render(element,document.getElementById('example'));
State and Props
The following example demonstrates how to combine use in an application state and props . We can set it in the parent component state and by using the props Pass it to the child component. In render function, we set the name and site to get the data passed by the parent component.
React instance
classWebSiteextendsReact.Component{constructor(){super();this.state={name:"Rookie Tutorial",site:"https://www.runoob.com"}}render(){return(<div>
<Namename={this.state.name}/> <Linksite={this.state.site}/>
</div>);}}classNameextendsReact.Component{render(){return(<h1>{this.props.name}</h1>);}}classLinkextendsReact.Component{render(){return(<ahref={this.props.site}>{this.props.site}</a>);}}ReactDOM.render(<WebSite/>,document.getElementById('example'));
Props verification
React.PropTypes since React v15.5, it has been moved to prop-types library.
<script src="https://cdn.bootcss.com/prop-types/15.6.1/prop-types.js"></script>
Props authentication uses the propTypes which ensures that our application components are used correctly React.PropTypes many validators (validator) are provided to verify that the incoming data is valid. When the direction props the JavaScript console throws a warning when invalid data is passed in.
The following example creates a Mytitle components, properti ``title``is required and is a string, and non-string types are automatically converted to strings:
React 16.4 instance
vartitle="Rookie Tutorial";//var title =
123;classMyTitleextendsReact.Component{render(){return(<h1>Hello,{this.props.title}</h1>);}}MyTitle.propTypes={title:PropTypes.string};ReactDOM.render(<MyTitletitle={title}/>,document.getElementById('example'));
React 15.4 instance
vartitle="Rookie Tutorial";//var title =
123;varMyTitle=React.createClass({propTypes:{title:React.PropTypes.string.isRequired,},render:function(){return<h1>{this.props.title}</h1>;}});ReactDOM.render(<MyTitletitle={title}/>,document.getElementById('example'));
More validators are described as follows:
MyComponent.propTypes={//can declare prop as specified JS
Basic data types, by default, these data are optional optionalArray:React.PropTypes.array,optionalBool:React.PropTypes.bool,optionalFunc:React.PropTypes.func,optionalNumber:React.PropTypes.number,optionalObject:React.PropTypes.object,optionalString:React.PropTypes.string,//Objects that can be rendered
numbers, strings, elements or
arrayoptionalNode:React.PropTypes.node,//React
element optionalElement:React.PropTypes.element,//Using JS instanceof
operator declaration prop
For instance of class。optionalMessage:React.PropTypes.instanceOf(Message),//use
enum to restrict prop
Only accept 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)]),//An array composed of specified types optionalArrayOf:React.PropTypes.arrayOf(React.PropTypes.number),//An object composed of properties of a specified type optionalObjectOf:React.PropTypes.objectOf(React.PropTypes.number),//specific
shape
Object of parameter optionalObjectWithShape:React.PropTypes.shape({color:React.PropTypes.string,fontSize:React.PropTypes.number}),//Any type plus
\`isRequired\` to send prop
Cannot be empty. requiredFunc:React.PropTypes.func.isRequired,//Any type that cannot be empty requiredAny:React.PropTypes.any.isRequired,//Custom validator. If verification fails, a return is required
Error object. Do not use directly \`console.warn\` or throw an exception, because of this
\`oneOfType\`
will fail. custom Prop:function(props,propName,componentName){if(!/matchme/.test(props[propName])){returnnewError('Validation
failed!');}}}}