Shulou(Shulou.com)06/02 Report--

This article focuses on "what are the ways to bind React components to this". Interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "what are the ways to bind React components to this"?

When developing a component with react, we need to pay attention to the direction of the method this within the component. There are two ways for react to define a component. One is a functional component, and the other is a class component. Some methods can be defined within a class component. The this of these methods needs to be bound to the component instance. The editor summarizes here that there are four solutions:

In the first scenario, you use bind to bind this inside the constructor, which has the advantage of avoiding having to re-bind every time you render, as follows:

Import React, {Component} from 'react'

Class Test extends React.Component {constructor (props) {super (props) this.state = {message: 'alloying'} this.handleClick = this.handleClick.bind (this)}

HandleClick (e) {console.log (this.state.message)}

Render () {return (Say Hello)}}

The second solution also uses bind, but this time it is no longer used inside the constructor, but is bound within the render function. In this case, each rendering needs to be re-bound. The code is as follows:

Import React, {Component} from 'react'

Class Test extends React.Component {constructor (props) {super (props) this.state = {message: 'alloying'}}

HandleClick (name, e) {console.log (this.state.message + name)}

Render () {return (Say Hello)}}

The third solution is that in the render function, the location of the calling method is wrapped in an arrow function, because the this of the arrow function points to the this of the scope in which the arrow function is defined, while the arrow function is defined in the render function, and the render function this always points to the component instance, so the this of the arrow function also points to the component instance as follows:

Class Test extends React.Component {constructor (props) {super (props) this.state = {message: 'alloying'}}

HandleClick (e) {console.log (this.state.message)}

Render () {return ({this.handleClick ()}} > Say Hello)}

There is a small problem with the above approach, because the arrow function is always anonymous, if you plan to remove the listening event, it is impossible, then how can you remove it? Look at the next option.

The fourth scheme is as follows:

Class Test extends React.Component {constructor (props) {super (props) this.state = {message: 'alloying'} handleClick = (e) = > {console.log (this.state.message)} render () {return (Say Hello)}

However, direct assignment in Classes is written in ES7, which is not supported by ES6. You have two choices, one is to configure your development environment to support ES7, and the other is to use the following way, which is another way to write the fourth solution, and the code is as follows:

Class Test extends React.Component {constructor (props) {super (props) this.state = {message: 'alloying'} this.handleClick = (e) = > {console.log (this.state.message)}} render () {return (Say Hello)}

These are the four options for binding this, the internal method of the react component. If there are any other solutions, please leave a message.

Information quotation:

Https://blog.csdn.net/sinat_17775997/article/details/56839485

At this point, I believe that you have a deeper understanding of "what is the way React components bind this". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.