Shulou(Shulou.com)05/31 Report--

In this article, the editor introduces in detail "how to transmit Props in React". The content is detailed, the steps are clear, and the details are handled properly. I hope this article "how to transmit Props in React" can help you solve your doubts.

In React, a very common pattern is to encapsulate components abstractly. These components will expose some properties (Props) to perform some simple functions, but their internal details may be complicated. In general, Props is unchanged. It is used in the following ways:

{this.props.key}

Let's first use a piece of code to see how Props uses

Var CommentBox = React.createClass ({

Render:function () {

Return (

Hello,world! I am a {this.props.name}.

);

}

}

);

ReactDOM.render (

Document.getElementById ('content')

);

See, it's that easy to use Props. As we can see from the above example, Props can actually be seen as a way to communicate between components. Of course, we will introduce the communication between components later. Here we only introduce the passing Props--Transferring Props.

Okay, then let's move on to the following code

Var Checkbox = React.createClass ({

Render: function () {

Var Cbox = this.props.checked? 'Checked': 'Unchecked'

Return (

{this.props.children}

);

}

});

ReactDOM.render (

Hello world!

Document.getElementById ('content')

);

There is nothing wrong with this code. However, if I want to add attributes title, name, onClick, etc., to the div tag, do I want to write each of them into the component?

{this.props.children}

This is obviously verbose and unsafe. At this point, we can use the features of JSX. To solve this problem. Its function is to extract unknown attributes.

Its usage is to list the attributes you currently want to use, followed by … Other (Note: … The string followed is not a fixed other, but can also be something else, for example: onmpw).

Var {checked,... other} = this.props

This ensures that all props is passed on except for those that are explicitly used. At this time... All the properties except the checked attribute are saved in other. We can rewrite the above example in the following form

Var Checkbox = React.createClass ({

Render: function () {

Var {checked,... other} = this.props

Var Cbox = checked? 'Checked': 'Unchecked'

Return (

);

}

});

ReactDOM.render (

Hello world!

Document.getElementById ('content')

);

In this case,... The attributes in other are title, name, and children, and there is no checked.

Var {checked,title,... other} = this.props

In this way, the attributes in the... other are name and children, so the title is not included.

Let's introduce a relationship with … A similar knowledge point of other is that … This.props . Look at the following example:

Var Checkbox = React.createClass ({

Render: function () {

Var Cbox = this.props.checked? 'Checked': 'Unchecked'

Return (

);

}

});

Actually, here... This.props and... The function of other is similar. But the difference is that... Other contains those properties other than those that are explicitly used. And... This.props contains all the attributes, whether you use them explicitly or not. That is, in the above example, the checked attribute will also be passed to the component.

What if a horoscope is used but wants to continue to pass it down? We know from the above explanation that if you use... In other mode, the property can no longer be uploaded when it is used. So if you want to continue to pass it, you can use checked= {checked} to retransmit it again.

Look at the following example

Var Checkbox = React.createClass ({

HandleChange:function () {

Console.log ('memory blog')

}

Render: function () {

Var {checked, title,... other} = this.props

Var Cbox = checked? 'FancyChecked': 'FancyUnchecked'

Var boxTitle = checked? 'y'+ title:'N'+ title

Return (

{boxTitle}

);

}

});

ReactDOM.render (

Document.getElementById ('content')

);

Here we should pay attention to the order of attributes. We put {... in input. Other} is placed in front of the JSX Props to ensure that the Props of the JSX is not overwritten. In the above example, we can guarantee that the type of input is checkbox.

For example, if the order of the Props in our input is as follows

When we render with render, we specify that the type property of input is text.

Then the final result is not a checkbox, but an input box. Because the type= "checkbox" attribute of input is... The type attribute in other is overridden.

After reading this, the article "how to transmit Props in React" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it yourself to understand it. If you want to know more about related articles, you are welcome to follow the industry information channel.

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.