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>
