react基礎學習小demo彙總
阿新 • • 發佈：2018-12-27
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>react demo</title> <script src="./build/react.js" charset="utf-8"></script> <script src="./build/react-dom.js" charset="utf-8"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js" charset="utf-8"></script> <style> .pstyle{ font-size:20px; } </style> </head> <body> <div id="container"> </div> </body> <script type="text/babel"> /*-----------------------------------------------------------------------------*/ /*傳遞props，父元件傳遞給子元件*/ var HelloMessage = React.createClass({ render: function(){ return <h1>{this.props.helloText}</h1>; } }); /*-----------------------------------------------------------------------------*/ /* react中設定樣式的三種形式 1.行內樣式，直接在標籤中設定樣式，style={{}}，用逗號隔開，並且使用駝峰命名法，右邊的屬性會覆蓋左邊的屬性 2.傳入物件當做樣式，用物件將樣式包裹起來，style={} 3.傳統的class設定樣式，class寫作className */ var hStyle = { titleStyle: { backgroundColor:"green", color:"red" } } var ShowMsg = React.createClass({ render: function(){ return( <div style={{backgroundColor:"yellow",border:"5px solid black"}}> <h1 style={hStyle.titleStyle}>{this.props.firstRow}</h1> <p className="pstyle">{this.props.secondRow}</p> </div> ) } }); /*-----------------------------------------------------------------------------*/ /*複合元件*/ var WebName = React.createClass({ render: function(){ return <h1>{this.props.webname}</h1> } }); var WebLink = React.createClass({ render: function(){ return <a href={this.props.weblink}>{this.props.weblink}</a> } }); var WebShow = React.createClass({ render: function(){ return( <div> //props中轉站，原始值從ReactDOM.render傳過來，再傳給子元件 <WebName webname={this.props.wname}/> <WebLink weblink={this.props.wlink}/> </div> ) } }); /*-----------------------------------------------------------------------------*/ /*遍歷子節點*/ /* ReactDOM.render( <ListComponent> <h1>hello</h1> <p>world</p> </ListComponent>, document.getElementById("container") ); 掛載時將會遍歷出 <li><h1>hello</h1></li> <li><p>world</p></li> */ var ListComponent = React.createClass({ render: function(){ return( <ul> { React.Children.map(this.props.children, function(child){ return <li>{child}</li> }) } </ul> ) } }); /*-----------------------------------------------------------------------------*/ /*props驗證型別*/ var ShowTitle = React.createClass({ propTypes:{ //title只能為字串 title: React.PropTypes.string.isRequired }, render: function(){ return <h1>{this.props.title}</h1> } }) /*-----------------------------------------------------------------------------*/ /*給props設定預設值，在掛載時可以省略傳遞的引數，例如title="xxx"可以省略*/ var MyTitle = React.createClass({ //預設值設定 getDefaultProps:function(){ return { title: "百度" }; }, render: function(){ return <h1>{this.props.title}</h1> } }) /*-----------------------------------------------------------------------------*/ /*在react中繫結事件*/ var MyButton = React.createClass({ //任意命名事件函式 handleClick :function(){ alert("點選按鈕觸發的效果") }, render: function(){ return( <button onClick={this.handleClick}>{this.props.buttonTitle}</button> ) } }) /*----------------------------------------------------------------------------*/ /*state的兩個小demo*/ /* demo1：根據複選框的選中狀態，改變文字*/ var CheckButton = React.createClass({ getInitialState: function(){ // 設定預設狀態，返回一個物件，在物件中設定的屬性，將會儲存在state當中 //版本更新後應該在constructor中設定 return { isCheck: false } }, handleChange: function(){ //修改狀態值，通過this.state讀取設定狀態值 this.setState({ isCheck: !this.state.isCheck }) }, render: function(){ //根據狀態值，重新渲染render //在JSX語法中，render中不能直接使用if var text = this.state.isCheck ? "已選中" :"未選中"; return ( <div> <input type="checkbox" onChange={this.handleChange}/>{text} </div> ) } }) /*demo2：在文字框中輸入值，同步顯示在p標籤中*/ var Input = React.createClass({ getInitialState: function() { return { value: "請輸入" } }, handleChange: function(event){ this.setState({ //event.target.value獲取使用者輸入的值 value:event.target.value }) }, render: function() { var value = this.state.value; return( <div> //在事件中改變狀態 <input type="text" value={value} onChange={this.handleChange}/> <p>{value}</p> </div> ) } }) /*-----------------------------------------------------------------------------*/ /*掛載*/ ReactDOM.render( <Input/>, document.getElementById("container") ); </script> </html>