Home > Web Front-end > JS Tutorial > body text

How to set the Props attribute

清浅
Release: 2020-09-08 10:05:55
Original
4340 people have browsed it

How to set the Props attribute

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") } }
Copy after login

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}
    
  }
}
Copy after login

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}

} })
Copy after login

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
    
    { /** * 列表项内容不固定,需要在创建模版时确定。利用this.props.children传递显示内容 * 获取到内容后,需要遍历children,逐项设置。利用React.Children.map方法 **/ React.Children.map(this.props.children,function(child) { //child是遍历得到父组件子节点 return
  • {child}
  • ; }) }
; } }) //渲染 ReactDom.render{ {

hello

"www.baidu.com"
}, document.getElementById("container") }
Copy after login

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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!