首页 > 代码库 > 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第二天，优化第一天的最后一个组件
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。