在多个react.js组件中呈现json数据

Rendering json data in multiple react.js components

本文关键字：json 数据组件 react js 更新时间：2023-09-26

我想从json文件中获取一些值，并将它们呈现在多个组件中。此代码似乎不起作用。请提出任何更改建议。范围可能存在一些问题。

var App = React.createClass({
    getInitialState: function(){
      return { myData: [] }
    },
    showResults: function(response){
        this.setState(
          {myData: response}
          )
    },
    loadData: function(URL) {
      $.ajax({
        type: 'GET',
        dataType: 'jsonp',
        url: URL,
        success: function(response){
          this.showResults(response)
        }.bind(this)
      })
    },
    render: function(){
      this.loadData("fileLocation/sample.json");
      return(
        <div>
        {myData.key1}
        <Component1 value={myData.key2} />
        <Component2 value={myData.array[0].key3}/>
        </div>
      )
    }
  });
  var Component1 = React.createClass({
    render: function () {
      return(
        <div>{this.props.value}</div>
      )
    }
  });
  var Component2 = React.createClass({
    render: function () {
      return(
        <div>{this.props.value}</div>
      )
    }
  });
  ReactDOM.render(<App/>, document.getElementById('content'));

这是我试图从中获取的sample.json文件。即使这样也显示了语法错误

{
  key1:"value1",
  key2:"value2",
  array: [
    {key3:"value3"},
    {key4:"value4"}
  ]
}

在loadData[1]:处正确调用showResults

var App = React.createClass({
    getInitialState: function(){
      return { myData: [] };
    },
    showResults: function(response){
        this.setState({
            myData: response
        });
    },
    loadData: function(URL) {
      var that = this;
      $.ajax({
        type: 'GET',
        dataType: 'json',
        url: URL,
        success: function(response){
          that.showResults(response);
        }
      })
    },

将loadData从render移动到componentDidMount[2]，并正确访问myData[3]：

    componentDidMount: function() {
      this.loadData("fileLocation/sample.json");
    },
    render: function(){
      return(
        <div>
        {this.state.myData.key1}
        <Component1 value={this.state.myData.key2} />
        <Component2 value={this.state.myData.array[0].key3}/>
        </div>
      )
    }
});

保持Component1和Component2原样：

var Component1 = React.createClass({
    render: function () {
      return(
        <div>{this.props.value}</div>
      )
    }
});
var Component2 = React.createClass({
    render: function () {
      return(
        <div>{this.props.value}</div>
      )
    }
});
ReactDOM.render(<App/>, document.getElementById('content'));