1.react中的列表渲染
注意使用以下代码的话，注意包的导入路径
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="./js/react.js"></script> <script src="./js/react-dom.js"></script> <script src="./js/babel.min.js"></script> </head> <script type="text/babel"> function handle(){ alert(1) } function MyCom(props) { if(props.boo){ return <h1>真的</h1> }else{ return <h1 onClick={handle}>假的</h1> } } function MyLie(props){ return ( <ul> { props.arr.map((item,index)=>{ return <li key={index}>{item}</li> }) } </ul> ) } class Myobj extends React.Component{ constructor(props){ super(props) } render(){ <!-- console.log(this.props) --> return <h1>年龄：{this.props.age}</h1> } } ReactDOM.render(<MyLie arr={[1,2,3,4]} />,document.getElementById('main')) ReactDOM.render(<MyCom boo={false} />,document.getElementById('ma')) ReactDOM.render(<Myobj oo={{username:'terry',age:13}} />,document.getElementById('mu')) </script> <body> <div id="ma"></div> <div id="mu"></div> <div id="main"></div> </body> </html>
