What are the React properties? Detailed explanation on the use of react attributes, events and sharing

This article mainly talks about the use of attributes in react, as well as the use of react events and sharing. Next, let us read this article

The main content of this article Explain the use of attributes in React, React-specific tag acquisition, and the use of React sharing, etc., as follows:

• State attribute of React

• React's Props attribute

• React event binding and two-way interaction of data

• Reuse and verification of React components

• React component Refs

• Shared operation Mixins between React independent components

1, State attribute

• React's state machine is used to change the data of its own module;

• The state scope only belongs to the current class and will not pollute other modules;

• Initialization: this.state = {username: “XXX”};

• The initialized state settings are placed in the constructor;

• Modify state: this.setState({username: “AAA”});

• ##Summary: state is the setting of the module’s own attributes.

2. Props attribute

• props are external attributes for the module (parent-child level data transfer)

• The transmission method requires parameter setting;

• Used in the receiving module: this.props.xxx;

3, Two-way interaction between event binding and data

3.1 Event binding

• First type: Bind this in the constructor: this.focus = this.focus. bind(this);

• Or call binding: onClick={this.focus.bind(this,99)}

  
  

## (this in the bind value is used for binding templates, 99 is used for parameter transfer)

3.2 Two-way binding of data

Parent passes to child (es5 follows)
The child page passes parameters to the parent page

• 
  

In the child page, pass the parameters between groups by calling the event props passed by the parent page
Use the onChange event for real-time monitoring

3.3 Data request method

Traditional AJAX method
promise provided by ES6

• promise.then( null, function( reason ){
      /* rejection */} );// 等价于promise.catch( function( reason ){
      /* rejection */} );

Promise provided by ES6—use Fetch to implement HTTP requests

• fetch("http://newsapi.gugujiankong.com/Handler.ashx?action=getnews&type=" + this.props.type + "&count=" + this.props.count, myFetchOptions).then(response => response.json()).then(json => this.setState({news: json}));

4. Reuse and verification of components

4.1 Props verification

Method 1: const types = {userid: React.PropTypes.number.isRequired}; BodyIndex.propTypes = types;
Method 2: BodyIndex.propTypes = { userid: React.PropTypes.number.isRequired };
Note: propTypes requires an installation environment after version v15.5 to be used:
• npm install prop-types –save

  
  

Introduced as follows: import PropTypes from 'prop-types';
Use BodyIndex.propTypes = { userid: PropTypes.number.isRequired };

4.2 Default Props value

Definition: const defaultNum = {username: "Default name"};
Use: BodyIndex.defaultProps = defaultNum; (If you want to see more, go to the PHP Chinese website
• React reference Learn in the

  column of the manual)

4.3 Reuse of components—Use of parameters

<BodyChild {...this.props} sex={"XXX}/>

5. Refs of components—Get tags

Method 1: Original way to get tags: var myButton = document.getElementById(“submitButton”); myButton.style.color = “red”;
Method Two: Set the ref attribute for the label:

• ;

method 2. Get and set: this.refs.submitButton .style.color = “red”;
Refs are the only reliable way to access the DOM nodes inside the component;
When the code ends, Refs will automatically destroy the original reference to the subcomponent;
Do not call Refs before render or render;
Don't abuse Refs.
6. Shared operation mixins between independent components

Function: common functions and code sharing between different components;
Project installation mixin:
• npm install –save react-mixin@2

Import plug-in:
• import ReactMixin from 'react- mixin';

Create a new shared file - store a large number of public functions or properties;
Wherever you need to use it, just use that component
• import MixinLog from './mixin.js';

• Assign the shared object collection MixinLog to the current component prototype: ReactMixin(BodyIndex.prototype, MixinLog);

• Make function calls corresponding to different needs That’s it, such as: MixinLog.log().

• Features: has a similar life cycle to the page, and is executed several times after being called .

7. Summary

This article mainly gives a brief introduction to the use of React's state attributes and component verification and reuse. You can download the software. After downloading, go through Navigate to the current folder in the command panel, then execute npm install to install all environments. After the installation is complete, execute webpack –watch and the project will be ready to run.

This article ends here (if you want to see more, go to the PHP Chinese website React User Manual column to learn). If you have any questions, you can leave a message below.

The above is the detailed content of What are the React properties? Detailed explanation on the use of react attributes, events and sharing. For more information, please follow other related articles on the PHP Chinese website!