废话不多说，直接上代码了
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="javascripts/react.js"></script> <script src="javascripts/react-dom.js"></script> <script src="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>第二天准时打卡，自学的小菜鸟，希望各位大神多多指教
时间： 2024-08-25 08:15:36