<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>React</title> <script src="https://unpkg.com/react@15.3.2/dist/react.js"></script> <script src="https://unpkg.com/react-dom@15.3.2/dist/react-dom.js"></script> <script src="https://unpkg.com/babel-core@5.8.38/browser.min.js"></script> <style> *{ margin:0; padding:0; } .accordion{ background:#f00; height:400px; } .accordion .div{ float:left; width:100%; } .accordion .title{ background:#0f0; height: 20px; line-height:20px; cursor:pointer; } .accordion .content{ transition:height 1s; height:0; background:#00f; overflow:auto; } .accordion .content.full{ height:320px; } .accordion:after{ clear:both; content:""; display:block; } </style> </head> <body> <div> <!-- <div> <div> <div>title</div> <div>content</div> </div> <div> <div>title</div> <div>content</div> </div> <div> <div>title</div> <div>content</div> </div> <div> <div>title</div> <div>content</div> </div> </div> --> </div> <script type="text/babel"> var AccordionDivComponent = React.createClass({ render : function() { return ( <div className="div"> <div className="title" onClick={this.props.clk}>title</div> <div className={"content "+(this.props.active ? "full" : "")} >content</div> </div> ); } }); var Accordion = React.createClass({ getInitialState : function() { return { index : 0 } }, handlClick : function(index , ev) { this.setState({ index : index }) }, render : function() { return (<div className="accordion"> {this.props.data.map((el, index)=> { return (<AccordionDivComponent active={this.state.index == index} clk={this.handlClick.bind(null,index)} key={index} />) })} </div>); } }); var arr = [ { title : "title", content : "content" }, { title : "title1", content : "content1" }, { title : "title2", content : "content2" }, { title : "title2", content : "content2" } ]; //console.time(); ReactDOM.render( <Accordion data={arr}/>, document.getElementById('example') ); </script> </body> </html>
进度条效果：
进度条是一个组件， 启动一个定时器， 每100毫秒重新渲染界面；
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>React</title> <script src="https://unpkg.com/react@15.3.2/dist/react.js"></script> <script src="https://unpkg.com/react-dom@15.3.2/dist/react-dom.js"></script> <script src="https://unpkg.com/babel-core@5.8.38/browser.min.js"></script> <style> .process-bar{ border:1px solid #ccc; height:20px; border-radius:4px; } .process{ height:20px; line-height:20px; text-align:center; background:#a1b2c3; } </style> </head> <body> <div> <!-- <div> <div> 50% </div> </div> --> </div> <script type="text/babel"> var ProcessBar = React.createClass({ render : function() { var width = parseInt(this.props.percent)+"%"; return ( <div className="process-bar"> <div className="process" style={{width:width}}> {this.props.percent}% </div> </div>) } }); //直接渲染组件 //ReactDOM.render(<ProcessBar percent="40" />, document.getElementById("example")); //启动一个组件和定时器， 每一百毫秒重新渲染组件； var per = 0; setInterval(function() { per++; if(per>=101)per=0; ReactDOM.render(<ProcessBar percent={per} />, document.getElementById("example")); },100) </script> </body> </html>