Props (properties)
are the properties of the component itself. The properties in props correspond to the component properties one-to-one. Responsible for transmitting information
1. Pass data from parent component to child component
//定义webName组件,负责输出名字 var webName = React.createClass({ render : function() { return{this.props.webname}
; } }) //定义webLink组件,负责跳转链接 var webLink = React.createClass({ render : function() { return {this.props.weblink} } }) var webShow = React.createClass({ render : function(){} }) //渲染 ReactDom.render{ return function() {, document.getElementById("container") } }
2. Set default attributes
through static defaultProps = {} is a fixed format to add default properties to a component
export default class MyView extends Component { static defaultProps = { age: 12, sex: '男' } render() { return你好{this.props.name}{'\n'}年龄{this.props.age}{'\n'}性别{this.props.sex} } }
3. Attribute checking
is done through static propTypes = {}. Set the format of the attribute, for example, we set age to number type
var title = React.createClass({ propTypes={ //title类型必须是字符串 title : React.PropTypes.string.isRequired }, render : function() { return{this.props.title}
} })
Extension operator... is a new feature of ES6 syntax. ...this.porps, a syntax that copies all properties in the parent component to the child component
2 The parent component passes the calling function to the child component to notify the parent component of the message.
3 Used as a mark for logical judgment of sub-components, rendering styles, etc.
4 children, which is not an attribute corresponding to the component, represents all child nodes of the component.
//定义webName组件,负责输出名字 var listCompont = React.createClass({ render : function() { return
Summary: The above is the entire content of this article, I hope it will be helpful to everyone
The above is the detailed content of How to set the Props attribute. For more information, please follow other related articles on the PHP Chinese website!