Reactjs - 从应用程序的任何地方获取组件

IT技术 javascript reactjs
2021-05-10 11:55:38

我想知道是否有办法通过使用某种类型的 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个回答

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

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

相当于这个,它更适合声明式模型:

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

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

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

如果您提供有关您要执行的操作的 jsfiddle,也许我可以提供更多帮助。