Детский динамический контент с реакцией

Question

Я пытаюсь экспериментировать здесь. Я хочу создать компонент, который автоматически заполняет некоторые данные из запроса ajax после установки. Что-то вроде этого:

var AjaxComponent = React.createClass({ 

    getInitialState: function() { 
     return { 
      data: {} 
     }; 
    }, 

    render: function() { 
     return (
      <div> 
       {this.state.data.text} 
      </div> 
     ); 
    }, 

    componentDidMount: function() { 
     makeAjaxResquest(this.props.url).then(function(response){ 
      this.setState({ 
       data: response.body // or something 
      }); 
     }.bind(this)); 
    } 

}); 

С этим примером компонентом, я хотел бы использовать <AjaxComponent url="/url/to/fetch" /> для отображения содержимого.

Теперь, если я хотел бы получить доступ к различным битам данных из дочерних элементов? Могу ли я сделать что-то подобное?

<AjaxComponent url="/url/to/fetch"> 
    <div> 
     <header>{RESPONSE.title}</header> 
     <div> 
      {RESPONSE.text} 
     </div> 
    </div> 
</AjaxComponent> 

Нет проблем, если он ничего не отображает перед завершением запроса ajax. Дело в том, как я могу передать данные для детей для рендеринга, не как реквизит. Является ли это возможным?

Answer 1

У меня был аналогичный сценарий, где у меня были аналогичные Компоненты, которые будут запрашивать данные из разных API. Предполагая, что вы знаете ожидаемый ответ от данного API, вы можете сделать это таким же образом.

По существу сделать общий компонент, в котором он будет функционировать как «API», а затем определить различные типы субкомпонентов и связанную с ними функцию рендеринга.

Например:

В виджете, то вы делаете что-то вроде этого, где виджеты просто обычный Java-файл с кучей функций:

componentDidMount: widgets[type].componentDidMount(), 

render: widgets[type].render(). 

В виджетах, его будет выглядеть следующим образом:

var widgets = { 
widget1: { 
    componentDidMount: function() { 
       //Ajax call.. 
    }, 

    render: function() { 
    //How should I draw? 

    } 

}, 

widget2: //Same format, different functions 

Затем в каком-либо компоненте вы просто go < Тип виджета = "widget1" \>

или что-то еще.

Есть пара странных вещей об этом, которые, вероятно, не сидят прямо с Реакцией. Во-первых, вы должны принять состояние вплоть до компонента верхнего уровня, поэтому я не буду выполнять свои вызовы ajax в компоненте componentDidMount ... Я бы скорее получил данные, которые я хочу для виджетов, которые я хочу отобразить на на более высоком уровне, затем передайте это в качестве пропеллера, если он не изменится, пока я не сделаю другой вызов API (мышление потока потока потока здесь). Тогда просто передать данные в качестве реквизита, а также и просто указать рендер функции:

< Widget data={this.state.data[0]} type=widget1 /> 

«Гоча» является то, что вы делаете предположение, что все, что в этом реквизита данных будет соответствовать тому, что вам нужно в типе виджетов. Я бы передал объект, а затем подтвердил все это в функции рендеринга и т. Д.

Это один из способов. Не уверен, что это действительно так, я уверен, что кто-то, кто знает больше, может разобрать его, но он подходит для моего варианта использования, и теперь у меня есть библиотека похожих компонентов, которую я могу выборочно отображать, передавая данные и тип, а затем просматривая соответствующую функцию рендеринга и проверку, чтобы убедиться, что объект данных содержит все, что нужно для рендеринга.