Parent01.js

import React, { Component } from 'react';
import $ from 'jquery';

import constantData from './data/SimpleSample.json';

class Parent01 extends Component {
    constructor(props) {
        super(props)

    }

    Ad = () => {
        alert('cac');
        /*
        console.log("constantData  taype is ="+typeof(constantData));
        console.log("employees  taype is ="+typeof(constantData.employees));
        console.log("employees  length = "+constantData.employees.length);
        console.log("No.1 givenName ="+constantData.employees[0].giveName);
        console.log("No.1 FamilyName ="+constantData.employees[0].giveName);
        console.log("No.1 Salary"+constantData.employees[0].salary);
        console.log("type of No.1 Salary"+typeof(constantData.employees[0].salary));
        */

        var test;
        if(window.XMLHttpRequest){
            test = new XMLHttpRequest();
        }else if(window.ActiveXObject){
            test = new window.ActiveXObject();
        }else{
            alert("請升級至最新版本的瀏覽器");
        }
        if(test !=null){
            test.open("GET","./data/SimpleSample.json",true);
            test.send(null);
            test.onreadystatechange=function(){
                if(test.readyState==4&&test.status==200){
                    var obj = JSON.parse(test.responseText);
                    alert(obj);
                }
            };

        }
    }

    render() {
        return (
            <div>
                <table>
                    <tbody>
                        <tr data-resourceuuid="201612121641078700726">
                            <td width="30%">2</td>
                            <td width="35%">3</td>
                            <td width="30%"><a href="#" onClick={this.Ad}>點(diǎn)擊</a></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        )
    }
}


export default Parent01;

data文件下的SimpleSample.json文件

{
  "employees": [
    {
      "FamilyName": "張",
      "giveName": "三",
      "salary": 1
    },
    {
      "FamilyName": "李",
      "giveName": "四",
      "salary": 2
    },
    {
      "FamilyName": "王",
      "giveName": "二",
      "salary": 3
    }
  ]
}