Comments 15
Вызов метода this.getDataFromServer() внутри render вызывает у меня сомнения. В данном примере мгновенно возвращается объект-заглушка, но в реальном приложении подразумевается асинхронный запрос к серверу, которому никак не место внутри render!
> код с помощью starter kit, или
ссылка в статье плохо вложилась: h ttp://https:github.comjarsbereact-starter-kit
ссылка в статье плохо вложилась: h ttp://https:github.comjarsbereact-starter-kit
Интересная статья, достаточно просто и понятно описаньі основньіе понятия React. Однако некоторьіе важніье моментьі остались за кадром.
Тут описано, как можно организовать рендеринг отдельньіх компонентов, и реагирование на собьітия внутри них. А как организовано «общение» компонентов и их координация? К примеру, во вложенном компоненте происходит собьітие, а среагировать на него должен родительский компонент(или даже соседний). Как это описать?
Можно ли «расшарить» изменяемьіе данньіе между несколькими компонентами(«реактивная коллекция»)?
Тут описано, как можно организовать рендеринг отдельньіх компонентов, и реагирование на собьітия внутри них. А как организовано «общение» компонентов и их координация? К примеру, во вложенном компоненте происходит собьітие, а среагировать на него должен родительский компонент(или даже соседний). Как это описать?
Можно ли «расшарить» изменяемьіе данньіе между несколькими компонентами(«реактивная коллекция»)?
Один из возможных подходов описан здесь (мы его используем, например):
facebook.github.io/flux/docs/overview.html#content
Компонент обращается к общему для всех диспетчеру, на который подписаны хранилища, на которые, в свою очередь, подписаны другие компоненты.
facebook.github.io/flux/docs/overview.html#content
Компонент обращается к общему для всех диспетчеру, на который подписаны хранилища, на которые, в свою очередь, подписаны другие компоненты.
можно передать метод родителя во внутрь компоненты через props:
…
render:function(){
return (
)
}
В самом же дочернем компоненте на некоторое событие проверять наличие переданной функции обратного вызова и вызывать её:
itemClick:function(e){
var item = e.currentTarget.dataset(«item»);
if (this.props.onSelect){
this,props.onSelect(item);
}
}
P.S. прошу прощения, что написал без форматирования текста.
…
render:function(){
return (
)
}
В самом же дочернем компоненте на некоторое событие проверять наличие переданной функции обратного вызова и вызывать её:
itemClick:function(e){
var item = e.currentTarget.dataset(«item»);
if (this.props.onSelect){
this,props.onSelect(item);
}
}
P.S. прошу прощения, что написал без форматирования текста.
Предыдущее сообщение страшно отобразилось, отредактировать его не получается (( Редко пишу комментарии (( Повторю:
можно передать метод родителя во внутрь компоненты через props:
…
В самом же дочернем компоненте на некоторое событие проверять наличие переданной функции обратного вызова и вызывать её:
можно передать метод родителя во внутрь компоненты через props:
…
<ChildComponent onSelect={this.itemSelected} > В самом же дочернем компоненте на некоторое событие проверять наличие переданной функции обратного вызова и вызывать её:
itemClick:function(e){ var item = e.currentTarget.dataset("item");if (this.props.onSelect){this.props.onSelect(item);}}
Внутри пользовательской функции render, свойство imageURL используется в качестве src для изображения.
Неведомая магия какая-то или ошибка?
Еще вопрос, а для чего это всё? Что мешало написать обычный html отдельно и js отдельно; управлять событиями, состояниями с того же JQuery и не делать лапшу из HTML in JS? Что б создать свои теги со своими свойствами?
Что мешало написать обычный html отдельно и js отдельно; управлять событиями, состояниями с того же JQuery и не делать лапшу из HTML in JS? Что б создать свои теги со своими свойствами?
Наверное мешала лапша из jquery. Прежде всего стоит изучить tftf.ru/stati/javascript/reactjs/flux290/ и прочитать доку, можно тамже, а после у вас могут отпасть подобные вопросы.
Наверное мешала лапша из jquery. Прежде всего стоит изучить tftf.ru/stati/javascript/reactjs/flux290/ и прочитать доку, можно тамже, а после у вас могут отпасть подобные вопросы.
В блоке про свойства есть еще одна опечатка
<span>{this.props.caption}</span>
<span></span>
Sign up to leave a comment.
Краткое руководство по React JS