1 <body> 2 <div id="root"> 3 4 </div> 5 <script type="text/babel"> 6 class Box extends React.Component { 7 constructor(props) { 8 super(props) 9 this.state = { 10 num : 2, 11 bool: true, 12 list:[] 13 } 14 } 15 16 componentDidMount(){ 17 axios.get("data.json").then((res)=>{ 18 this.setState({ 19 list:res.data.data 20 }) 21 }) 22 } 23 24 render() { 25 return ( 26 <div> 27 28 <table border="1"> 29 <thead> 30 <tr> 31 <td>ID</td> 32 <td>名字</td> 33 </tr> 34 </thead> 35 <tbody> 36 { 37 this.state.list.map((ele,index)=>{ 38 return ( 39 <tr key={index}> 40 <td>{ele.id}</td> 41 <td>{ele.name}</td> 42 </tr> 43 ) 44 }) 45 } 46 47 </tbody> 48 </table> 49 </div> 50 ) 51 } 52 } 53 ReactDOM.render( 54 <Box></Box>, 55 document.getElementById("root") 56 ) 57 </script> 58 </body>
React里面的componentDidMount()钩子函数用法
猜你喜欢
转载自www.cnblogs.com/LC123456/p/12115955.html
今日推荐
周排行