The following example shows how to use the In the instance You can use the component class’s The following example demonstrates how to combine use in an application Props authentication uses the The following example creates a More validators are described as follows:
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. 3.7.1. Use Props ¶
props
:React instance ¶
functionHelloMessage(props){return<h1>Hello{props.name}!</h1>;}constelement=
<HelloMessagename="Runoob"/>;ReactDOM.render(element,document.getElementById('example'));
name
property through the
props.name
to get. 3.7.2. Default Props ¶
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'));
3.7.3. State and Props ¶
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'));
3.7.4. 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>
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.
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'));
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!');}}}}