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

React.js props

php中世界最好的语言
Release: 2018-03-13 14:51:27
Original
1776 people have browsed it

This time I will bring you the props of React.js. What are the things to note when using the props of React.js?The following is a practical case, let’s take a look.

The parent component passes the value to the child component

<Son userid={123}/>
Copy after login

Receive the value passed by the parent component in the Son component

<p>接收到的父页面的属性 -- userid: {this.props.userid} username:{this.props.username}</p>
Copy after login

Of course, you can also set the parameters to be passed on the Son page Types and default values


// 给属性设置类型BodyIndex.propTypes = {    // isRequired 必须的参数
    userid: React.PropTypes.number.isRequired,
    username: React.PropTypes.string
}// 设置默认值BodyIndex.defaultProps = {
    username: &#39;哈哈&#39;}
Copy after login

For details on setting the type, please refer to the official documentation

MyComponent.propTypes = { // You can declare that a prop is a specific JS primitive. By default, these
 // are all optional.
 optionalArray: PropTypes.array, optionalBool: PropTypes.bool, optionalFunc: PropTypes.func, optionalNumber: PropTypes.number, optionalObject: PropTypes.object, optionalString: PropTypes.string, optionalSymbol: PropTypes.symbol, // Anything that can be rendered: numbers, strings, elements or an   array// (or fragment) containing these types.optionalNode: PropTypes.node,// A React element.optionalElement: PropTypes.element, // You can also declare that a prop is an instance of a class. This uses
  // JS&#39;s instanceof operator.
  optionalMessage: PropTypes.instanceOf(Message),  // You can ensure that your prop is limited to specific values by treating
  // it as an enum.
  optionalEnum: PropTypes.oneOf([&#39;News&#39;, &#39;Photos&#39;]),  // An object that could be one of many types
  optionalUnion: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.number,
    PropTypes.instanceOf(Message)
  ]),  // An array of a certain type
  optionalArrayOf: PropTypes.arrayOf(PropTypes.number),  // An object with property values of a certain type
  optionalObjectOf: PropTypes.objectOf(PropTypes.number),  // An object taking on a particular shape
  optionalObjectWithShape: PropTypes.shape({    color: PropTypes.string,    fontSize: PropTypes.number
  }),  // You can chain any of the above with `isRequired` to make sure a warning
  // is shown if the prop isn&#39;t provided.
  requiredFunc: PropTypes.func.isRequired,  // A value of any data type
  requiredAny: PropTypes.any.isRequired,  // You can also specify a custom validator. It should return an Error
  // object if the validation fails. Don&#39;t `console.warn` or throw, as this
  // won&#39;t work inside `oneOfType`.
  customProp: function(props, propName, componentName) {    if (!/matchme/.test(props[propName])) {      return new Error(        &#39;Invalid prop `&#39; + propName + &#39;` supplied to&#39; +        &#39; `&#39; + componentName + &#39;`. Validation failed.&#39;
      );
    }
  },  // You can also supply a custom validator to `arrayOf` and     `objectOf`.
  // It should return an Error object if the validation fails. The validator
  // will be called for each key in the array or object. The first two
  // arguments of the validator are the array or object itself, and the
  // current item&#39;s key.
  customArrayProp: PropTypes.arrayOf(function(propValue, key,       componentName, location, propFullName) {    if (!/matchme/.test(propValue[key])) {      return new Error(        &#39;Invalid prop `&#39; + propFullName + &#39;` supplied to&#39; +        &#39; `&#39; + componentName + &#39;`. Validation failed.&#39;
      );
    }
  })
 };
Copy after login

The Son component passes the properties passed from the parent component to the grandchild component

Through the expansion
operation Symbol {...this.props}, pass all the properties passed from the parent component to its own child component (grandchild component) id={1234} is passed by the Son component itself to the grandchild component Attributes

<GrandSon {...this.props} id={1234}/>
Copy after login

Call the attributes passed from the Son component in the grandson component

<p>{this.props.userid} {this.props.username} {this.props.id}</p>
Copy after login

refs: It is the only reliable way to access the DOM node inside the component


to the label Add ref

<input ref=&#39;submitButton&#39; type="button" value=&#39;提交&#39; onClick={() => this.changeUserInfo(99)}/>
Copy after login

When you want to get the dom, get it through this.refs.xxx

this.refs.submitButton.style.color = &#39;red&#39;;
Copy after login

Note:

Do not call Refs before render or render;

Don’t abuse Refs, if you can’t use it, don’t use it!!!

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Routing parameters of Vue.js

Custom directive directive of Vue.js

Vue.js to js implementation transition


The above is the detailed content of React.js props. 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
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!