Я хочу сделать приложение с помощью React.js. Я хочу, чтобы он был легко настраиваемым из внешнего мира (например, путем написания сценариев пользователей). Идея, которую я пыталась использовать, заключается в создании некоторых специальных свойств в состоянии корневого элемента (например, sidebarItems
или playlistCreatedHooks
), поэтому разработчики addon могли что-то там добавить. Мои вопросы: это хороший способ сделать это, есть ли правильный путь для достижения чего-то подобного моей цели и, наконец, как разработчики аддона смогут получить доступ к этим реквизитам?Доступ к реальному состоянию извне
ответ
Один из вариантов является наблюдаемым. В основном это объект, который вы можете прослушать, и создать изменение. Вы также можете генерировать другие события, такие как событие add на data.playlists, чтобы создать api, который вы хотите предоставить.
// data.js
var data = {
sidebarItems: Observable([]),
playlists: Observable([])
};
// app.js
var App = React.createComponent({
mixins: [data.sidebarItems.mixin("sidebar")],
render: function(){
return this.state.sidebar.map(renderSidebarItem);
}
});
/// userscript.js
// causes the view to update
data.sidebarItems.set(somethingElse);
// run when someone does data.playlists.set(...)
data.playlists.on('change', function(playlists){
});
// an event you could choose to emit with data.playlists.emit('add', newPlaylist)
data.playlists.on('add', function(newPlaylist){
});
Вот пример (непроверенное) осуществление Наблюдаемого используемым выше, с дополнительной функцией для генерирования среагировать компонент Mixin.
var events = require('events'); // or some other way of getting it
var Observable = function(initialValue){
var self = new events.EventEmitter();
var value = initialValue;
self.get = function(){ return value };
self.set = function(updated){
value = updated;
self.emit('change', updated);
};
self.mixin = function(key){
var cbName = Math.random().toString();
var mixin = {
getInitialState: function(){ var o = {}; o[key] = value; return o },
componentDidMount: function(){
self.on('change', this[cbName]);
},
componentWillUnmount: function(){
self.removeListener('change', this[cbName]);
}
}
mixin[cbName] = function(){
var o = {}; o[key] = value; this.setState(o);
};
return mixin;
}
return self;
}
Это мое решение. Благодаря этому состояние Observable the React автоматически обновляется (с его последствиями, например, с повторной обработкой компонента), и вы можете даже слушать изменения вне реакции благодаря методу .on
.
var eventEmitter = {
_JQInit: function() {
this._JQ = jQuery(this);
},
emit: function(evt, data) {
!this._JQ && this._JQInit();
this._JQ.trigger(evt, data);
},
once: function(evt, handler) {
!this._JQ && this._JQInit();
this._JQ.one(evt, handler);
},
on: function(evt, handler) {
!this._JQ && this._JQInit();
this._JQ.bind(evt, handler);
},
off: function(evt, handler) {
!this._JQ && this._JQInit();
this._JQ.unbind(evt, handler);
}
};
var Observable = function(initialValue, name) {
var self = eventEmitter;
var name = name;
var obj = {
value: initialValue,
ops: self
};
self.get = function() {
return obj.value
};
self.set = function(updated){
if(obj.value == updated)
return;
obj.value = updated;
self.emit('change', updated);
};
self.mixin = function() {
var mixin = {
getInitialState: function() {
var obj_ret = {};
obj_ret[name] = obj;
return obj_ret;
},
componentDidMount : function() {
self.on('change', function() {
var obj_new = {};
obj_new[name] = obj;
this.setState(obj_new);
}.bind(this));
}
};
return mixin;
};
return self;
};
пример (используя его для показа предупреждения на другом компоненте): // Observable INIT alert_msg = Observable ('', 'alertmsg');
var ConfirmBtn = React.createClass({
mixins: [alert_msg.mixin()],
handleConfirm: function(e) {
e.preventDefault();
this.state.alertmsg.ops.set(null);
if(! $('#cgv').is(':checked')) {
this.state.alertmsg.ops.set('Please accept our terms of conditions');
return;
}
}
}
var AlertPayment = React.createClass({
mixins: [alert_msg.mixin()],
render: function() {
var style = (this.state.alertmsg === null) ? {display: 'none'} : {display: 'block'};
return (
<div style={style} className="alertAcceptTerms">
{this.state.alertmsg.value}
</div>
);
}
});
Надеется, что это помогает
- 1. Доступ к состоянию приложения извне a Page
- 2. Доступ к состоянию подкомпонента om.next
- 3. Доступ к реальному времени на компьютере
- 4. Доступ к реальному базовому типу геттера?
- 5. Доступ к реальному члену профсоюза по адресу
- 6. Доступ к изображению извне div
- 7. Доступ к DevFabric извне Localhost
- 8. Доступ к hdfs извне hadoop
- 9. Доступ к файлу WAR извне
- 10. Доступ к phpldap admin извне
- 11. Доступ к Картам Google извне
- 12. Доступ к пользовательскому управлению извне
- 13. Доступ к массиву извне функции
- 14. Доступ к себе извне класса
- 15. Доступ к сервису извне интрасети
- 16. Доступ к hdfs извне кластера
- 17. Доступ к переменной извне функции?
- 18. Доступ к SimpleHTTPServer извне Сеть
- 19. Доступ к объекту извне AsyncTask
- 20. Доступ к локальной системе извне
- 21. Доступ к Sharepoint извне WebUI
- 22. Доступ к данным извне, обещание
- 23. Как получить доступ к состоянию принтера?
- 24. Как получить доступ к предыдущему состоянию объекта?
- 25. Доступ к состоянию маршрутизатора доступа в селекторе
- 26. ReactJS: Доступ к состоянию ребенка Final Member
- 27. Событие Global.asax, имеющее доступ к состоянию сеанса
- 28. Доступ к состоянию компонента с другого компонента
- 29. Доступ к состоянию Redux в создателе действия?
- 30. DDD - Доступ к состоянию лица в Repository
Стопов, выглядит удивительным, спасибо! – Ale