Reactjs - 从应用程序的任何位置获取组件

时间:2013-11-13 14:38:48

标签: javascript reactjs

我想知道是否有办法通过使用某种类型的id或类型来获取组件,就像在DOM操作中一样。类似的东西:

var Avatar = React.createClass({
    render: function () {
        ...
    }
});
React.renderComponent(Avatar({id:'avatar'}), ...);
...
...
var avatar = React.getComponentById('avatar');
avatar.setProps({url = 'http://...'});
// or
var avatars = React.getComponentByType('Avatar'); 
if (avatars.length) {
    avatars[0].setProps({url = 'http://...'});
}

我不想保留组件实例的引用......

2 个答案:

答案 0 :(得分:8)

setProps是你应该谨慎使用的东西。事实上,存储对“渲染”组件的引用通常可能表明您可以以不同方式构造代码。我们还限制您使用setProps到顶级组件。

var avatar = React.renderComponent(<Avatar .../>, node);
avatar.setProps({ foo: '1' });

等同于此,与声明性模型相比更好一些:

React.renderComponent(<Avatar .../>, node);
React.renderComponent(<Avatar ... foo="1" />, node);

您可以在函数调用中包装该渲染,以便您可以随意调用它。

答案 1 :(得分:3)

抱歉,没有(公开公开的)已安装的React组件的全局注册表。如果您需要在安装后将消息发送到组件,最好的方法是保存对它的引用。迭代遍历所有Avatar组件的列表似乎对我来说是错误的解决方案,因为它破坏了组件的可组合性方面,其中每个父组件可以指定其子级的道具并相信外部力量不会改变它们 - 更改这一点会使您的页面更难以推理。

如果你提供了一个关于你想要做什么的方法,也许我可以提供更多的帮助。