Question

My React组件基于本地JSON配置文件进行渲染。 JSON文件由标签文本，标签的各种样式，数据格式（如数字，负数等）组成。要与标签一起显示的实际数据应该来自外部API。我的组件看起来像这样

＆＃13;

var WidgetLabel = React.createClass({  
  render: function() {
    return (
      <span>
        <p className="card-stats-title"><i className="mdi-editor-attach-money"></i>{this.props.data.title}</p>       
      </span>
    );  
  }
});

var WidgetDataWrapper = React.createClass({
  render: function() {
    return <h4 class="card-stats-number">{this.props.api_data_value}</h4>;
  }
});

＆＃13;

<div className="col s12 m6 l3">
        <div className="card">
          <div className={rndmClassName}>
            <WidgetLabel label_data={this.props.widget_label} />
            <WidgetDataWrapper widget_data_config={this.props.widget_data_config} widget_api_data={this.props.widget_api_data} />
          </div>
        </div>
      </div>

＆＃13;

WidgetLabel将是JSON文件中的值数组，数据格式将在JSON文件中。我需要从API中获取每个标签的数据。

我对该组件的最终结果将是

<div class="col s12 m6 l3">
   <div class="card">
       <p class="card-stats-title">{label_text_from_json}</p>
       <h4 class="card-stats-number">{data_this_label_from_api}</h4>
   </div>
   <div class="card">
       <p class="card-stats-title">{label_text_from_json}</p>
       <h4 class="card-stats-number">{data_this_label_from_api}</h4>
   </div>
   <div class="card">
       <p class="card-stats-title">{label_text_from_json}</p>
       <h4 class="card-stats-number">{data_this_label_from_api}</h4>
   </div>
</div>

我坚持认为我们是否可以使用React做到这一点？由于我是初学者，我可以帮助我解决这个问题吗？

Answer 1

React不与AJAX实用程序捆绑在一起，但您可以使用本机XMLHttpRequest或jQuery.ajax从API获取JSON数据。您可以采用两种不同的方法解决此问题：

A）获取JSON数据，然后初始化组件，将JSON响应作为props传递。使用jQuery简洁和无状态组件的示例：

$.getJSON('api_url', function( response ){
    ReacDOM.render( <MyComponent {...response } />, document.getElementById('wrapper') );
});


var MyComponent = (props) => (
        <div className="card">
          <div className={props.rndmClassName}>
            <WidgetLabel label_data={props.widget_label} />
            <WidgetDataWrapper widget_data_config={props.widget_data_config} widget_api_data={props.widget_api_data} />
          </div>
        </div>
       );

如果您只想使用外部资源的配置渲染组件而不需要稍后更新，这是一个很好的方法

B）初始化组件，获取componentDidMount()中的数据并将响应设置为状态。

var MyComponent = React.createClass({
    getInitialState(){
       return { config : null }
    },
    componentDidMount(){
       $.getJSON( $.getJSON('api_url', (response) => {
           this.isMounted() && this.setState({ config : response });
       });
    },
    render(){
       return(
        <div className="card">
          <div className={rndmClassName}>
            { this.state.config && <WidgetLabel label_data={this.state.config.widget_label} /> }
            { this.state.config && <WidgetDataWrapper widget_data_config={this.state.config.widget_data_config} widget_api_data={this.state.config.widget_api_data} /> }
          </div>
        </div>
       );
    } 
});

ReacDOM.render( <MyComponent />, document.getElementById('wrapper') ); });

如果组件是动态的并且应该反映对状态的进一步更新，那将会更好。

从外部API

1 个答案: