我想使用 React.js 制作一个应用程序。我希望它可以轻松地从外部进行定制(例如通过编写用户脚本)。我尝试使用的想法是在根元素状态中创建一些特殊属性(例如 sidebarItems
或 playlistCreatedHooks
),以便插件开发人员可以在那里添加一些东西。我的问题是:这是一个好方法吗?是否有正确的方法™来实现与我的目标类似的目标,最后,插件开发人员将如何访问这些 Prop ?
最佳答案
一种选择是可观察量。基本上,它是一个您可以监听更改并创建更改的对象。您还可以发出其他事件,例如 data.playlists 上的“add”事件,以创建您想要提供的 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){
});
这是上面使用的 Observable 的示例(未经测试)实现,其中包含一个用于生成 React 组件 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;
}
关于architecture - 从外部访问 React 状态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42325723/