One, property
1, the first method of use: Key-value pairs
<claanamea name = "Tom"/>
<claanamea name = {Tom}/>
<claanamea name = {"Tom"}/>
<claanamea name = {[1,2,3]}/>//Array
<claanamea name = {functionname}/>//define a function
2, the second method: Three point of the expanded object form
var props = {One
: "123",
tow:321
}
<classnameb {... props}/>
Adding three quotes is equivalent to getting two attributes in this (one and two)
3, setprops form: Update the property through the component, cannot modify the attribute inside the component, because it will violate the component design principle (try to avoid)
var instance =react.render (<classnamec ><claasnamec/>,document.body);
Instance.setprops ({name: "Tom"});
The state of being in a situation where things are handled by themselves and the private properties of things.
Getinitialstate: Initializes each instance-specific state
SetState: Update Component Status
setstate triggers the diff algorithm: determines the difference between State and page results and whether it needs to be updated
Comparison of State and property
States and properties trigger render updates, all of which are pure JS objects
Status: Is related to itself, is not affected by the parent component and is not affected by the child component
Properties: cannot be modified by itself, only from the parent component, the parent component can modify its properties
The fundamental difference: components need to modify the state of maintenance when they are running
Four, simple demo familiar:
<!DOCTYPE html>
2 <html>
3 <head>
4 <meta http-equiv='Content-type' content='text/html; charset=utf-8'>
5 <title>daomul's example</title>
6 <link rel="stylesheet" href="../shared/css/base.css" />
7 </head>
8 <body>
9 <h1>Text demo</h1>
<div id="container">
</div>
<script src="../shared/thirdparty/es5-shim.min.js"></script>
<script src="../shared/thirdparty/es5-sham.min.js"></script>
<script src="../shared/thirdparty/console-polyfill.js"></script>
<script src="../../build/react.js"></script>
<script src="../../build/JSXTransformer.js"></script>
<script type="text/jsx">
//Content components
var Content = React.createClass({
getInitialState:function(){
Return {
inputText:'',
}
}
handleChange:function(event){
this.setState({inputText:event.target.value});
}
handleClick:function(){
console.log("props name is " + this.props.selectName + " \n and inputText is " + this.state.inputText);
}
render:function(){
Return <div>
<textarea onChange = {this.handleChange} placeholder = "please input something!"></textarea>
<button onClick = {this.handleClick}>sumbit</button>
</div>;
}
};
//Comment component
var Comment = React.createClass({
getInitialState:function(){
Return {
names:["Tom","Axiba","daomul"],
selectName:'',
}
}
handleSelect:function(){
this.setState(
{selectName : event.target.value}
);
}
render:function(){
var options = [];
//Add child options to options
for (var option in this.state.names) {
options.push(<option value={this.state.names[option]}> {this.state.names[option]} </option>)
}
Return <div>
<Content selectName = {this.state.selectName}>
</Content>
<select onChange = {this.handleSelect}>
{options}
</select>
</div>;
}
};
//start render
React.render(<Comment></Comment>,document.body);
</script>
</body>
</html>
The above article on the react properties and the state of some of the summary is small to share all the content of everyone, hope to give you a reference, but also hope that we support the cloud-dwelling community.
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
