Home > Developer > Web Develop
If we need to pass parameters to the component, we can use the This.props object, as follows:
<body>
<div id= "Example" ></div>
<script type= "Text/babel" >
var hellomessage = React.createclass ({
Render:function () {
return }
});
Reactdom.render (
document.getElementById (' example ')
);
</script>
</body>
Note that when adding a property, the class attribute needs to be written as ClassName, and the for property needs to be written as htmlfor because the class and for are reserved words for JavaScript.
If we need to pass parameters to the component, we can use the This.props object, as follows:
<body>
<div id= "Example" ></div>
<script type= "Text/babel" >
var WebSite = React.createclass ({
Render:function () {
Return (
<div>
<name Name={this.props.name}/>
<link Site={this.props.site}/>
</div>
);
}
});
var Name = React.createclass ({
Render:function () {
Return (
);
}
});
var Link = React.createclass ({
Render:function () {
Return (
<a href={this.props.site}>
{This.props.site}
</a>
);
}
});
React.render (
<website name= "Mr. Lemon" site= "http://www.baidu.com"/>
document.getElementById (' example ')
);
</script>
</body>
React State (status)
The React the component as a state machine (machines). By interacting with the user, you implement different states and then render the UI to keep the user interface and data consistent.
React, simply update the state of the component and then re-render the user interface based on the new state (do not manipulate the DOM).
The Likebutton component is created in the following instance, and the Getinitialstate method defines the initial state, which is an object that can be read through the This.state property.
When the user clicks on the component, causing the state to change, the This.setstate method modifies the state value and, after each modification, automatically calls the This.render method to render the component again.
<body>
<div id= "Example" ></div>
<script type= "Text/babel" >
var Likebutton = React.createclass ({
Getinitialstate:function () {
return {liked:false};
},
Handleclick:function (event) {
This.setstate ({liked:!this.state.liked});
},
Render:function () {
var text = this.state.liked? ' Like ': ' Don't like ';
Return (
<p onclick={this.handleclick}>
You <b>{text}</b> me. Click I toggle status.
</p>
);
}
});
React.render (
<likebutton/>
document.getElementById (' example ')
);
</script>
</body>
React Props
Using Props
<body>
<div id= "Example" ></div>
<script type= "Text/babel" >
var hellomessage = React.createclass ({
Render:function () {
return }
});
Reactdom.render (
document.getElementById (' example ')
);
</script>
</body>
Default Props
You can set the default value for props by using the Getdefaultprops () method, as shown in the following example:
<body>
<div id= "Example" ></div>
<script type= "Text/babel" >
var hellomessage = React.createclass ({
Getdefaultprops:function () {
return {
Name: ' Mr. Lemon '
};
},
Render:function () {
return }
});
Reactdom.render (
document.getElementById (' example ')
);
</script>
</body>
Reactjs Basics of Entry (ii)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
