首页 > 代码库 > React.js第二天,优化第一天的最后一个组件

React.js第二天,优化第一天的最后一个组件

 废话不多说,直接上代码了

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="http://www.mamicode.com/javascripts/react.js"></script>
<script src="http://www.mamicode.com/javascripts/react-dom.js"></script>
<script src="http://www.mamicode.com/javascripts/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var Allwidnow=React.createClass({
render:function () {
return<div>
<BComponent name="username"/>
<InPutComponent tips="place input username"/>
<br/>
<BComponent name="passwrold"/>
<InPutComponent tips="place input passwrold"/>
<br/>
<ButtonComponent bname="Signin"/>
<ButtonComponent bname="Signup"/>
</div>
}
})
var BComponent = React.createClass({
render:function () {
return <b>{this.props.name}</b>
}
})
var InPutComponent = React.createClass({
render:function () {
return <input type="text" placeholder={this.props.tips}/>
}
})
var ButtonComponent = React.createClass({
render:function () {
return <button>{this.props.bname}</button>
}
})
ReactDOM.render(
<div>
<Allwidnow/>
</div>,
document.getElementById(‘example‘)
)
</script>
</body>
</html>
昨天做这个小demo的时候,一口气做了6个插件,感觉快要吐血!今天优化了一下,顿时感觉干净多了!貌似感觉有一种,write less,do more!
今天我们用的 this.props name做的优化,这到底是个什么鬼,下面就让我们仔细的分析一下!
Props:
一、React 里有一个非常常用的模式就是对组件做一层抽象。组件对外公开一个简单的属性(Props)来实现功能,但内部细节可能有非常复杂的实现。

二、React中的每一个组件,都包含有一个属性(props),属性主要是从父组件传递给子组件的,在组件内部,我们可以通过this.props获取属性对象

三、Props属性的二种使用方法:
1、直接在组件中使用key/value的形式来指定属性(案例如上)
2、使用延展属性为组件指定属性(下面的案例)
<div id="example"></div>
<script type="text/babel">
var HelloReact = React.createClass({
render:function () {
return <div>Hello {this.props.name1} {this.props.name2}</div>
}
});
var props = {
name1:‘Jhon‘,
name2:‘Tom‘
};
ReactDOM.render(
<HelloReact {...props}/>,
document.getElementById(‘example‘)
)
</script>
第二天准时打卡,自学的小菜鸟,希望各位大神多多指教

React.js第二天,优化第一天的最后一个组件