javascript - 从外部 API 为 React 组件绑定(bind)数据

Question

我的 React 组件根据本地 JSON 配置文件进行渲染。 JSON 文件由标签文本、标签的各种样式、数据格式(如数字、负数等)组成。与标签一起显示的实际数据应从外部 API 获取。我的组件将如下所示

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>;
  }
});

<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>

其中 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 来做到这一点？由于我是 React js 的初学者，任何人都可以帮助我解决这个问题吗？

Answer 1

React 未与 AJAX 实用程序捆绑在一起，但您可以使用 native 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') ); });

• 如果组件是动态的并且应该反射(reflect)状态的进一步更新，那就更好了。