Reactjs 连接（null，null，null，{withRef:true}）非常规？

我需要从子组件中提取一些内容，这样父组件（或者通常更高级别的）就可以将内部子组件的数据发送给action creator

以前我在子ref上调用一个函数，比如

this.refs.child.doStuff（）

，直到我发现在我需要方法数据的任何父组件中跟踪ref都变得越来越困难。每次有一个HOC或其他类型的复合包装器时，我都需要添加更多的代码，以便将ref向上传递到我需要的链中。更不用说每个子函数中都有很多重复的代码，这是所有子函数的标准

//child.js
类InnerComponent扩展了React.PureComponent{
多斯塔夫=（）=>{
calculateFrom（this.state.content）
//然后用它做一些事情。。
//从那以后，我只需返回数据，就可以使这一点更加重复
//向行动调度员报告
}
}
常量SomeHOC=（args）=>{
return（Component）=>类扩展React.Component{
过程（wrappedComponentInstance）{
//我在这里使用了getWrappedInstance函数
//模拟conect（..，..，..{withRef:true}）的
//与更高级别功能的基本兼容性
//潜入圈套以到达底部
this.getWrappedInstance=（）=>wrappedComponentInstance；
}
render（）{
const props=Object.assign（{}，this.props，{ref:this.proc.bind（this）}）；
回来
}
}
}
//实际上，这里不需要connect（），但当其他相同样式的组件不处于包装形式时，它将在这些组件上运行
导出默认连接（…，…，null，{withRef:true}）（SomeHOC（）（InnerComponent）；

//父容器（在我的应用程序中有多个）
类容器扩展了React.PureComponent{
determineContent=（…）=>{
返回React.createElement（this.state.content{
//所以我可以得到合成的内部元素。。。
ref：（element）=>{this.\u compositeElement=element；}，
…视窗道具
});
}
组件willmount（）{
// ...
System.import（`${dynamic}.jsx`）。然后（（内容）=>{
this.setState（{content}）；
});
}
renderButtonContainer=（）=>{
//这就是事情变得奇怪的地方。。。
如果（！this.doStuff）{
this.doStuff=（（）=>{
//勾引我的裁判
const compositeElement=此元素。_compositeElement；
//通过深潜到达基地
让基地；
if（compositeElement&&typeof compositeElement.getWrappedInstance==='function'）{
base=this._compositeElement.getWrappedInstance（）；
while（typeof base.getWrappedInstance==='function'）{
base=base.getWrappedInstance（）；
}
if（compositeElement.doStuff==='function'）{
this.doStuff=base.doStuff；
}
}             
})());
}
返回(
);
}
render（）{
{this.renderButtonContainer（）}
{this.determineContent（…）}
}
}

我已经完成了所有这些，现在按照Redux风格分配一个操作，并让我的reducer处理需要发生的事情（只是一个使用操作中的数据立即执行的同步内部调用；我仍然不确定reducer中的这个是否是坏形式）

但是，由于我需要我的子组件在选择父组件时仍然返回对它们的

doStuff（）

（

getStuff（）

）的调用，我发现我自己也遇到了相同的ref问题

这一切都错了吗？在我看来，对于我拥有的每个子组件，我都需要存储

getStuff（）中不断变化的数据

在我的状态模型中，并将其传递到组件中？但我预计这将与实际组件脱离太多，我的应用程序的其余部分并不真正关心这一点。

坦率地说，这似乎都不是一个好主意。即使在技术上可行，它也完全违背了应用程序的预期用途两者都会反应并重新聚合

通常，引用是一种转义图案填充，只有在必要时才应使用。对DOM节点的引用更有用，因为您可能需要执行一些操作，例如确定单击是否在DOM节点内，或者从非受控输入中读取值。对组件的引用的用例要少得多。特别是，直接调用组件上的方法是不必要的Efinite不是惯用的React用法，如果可能的话应该避免使用。因此，卑躬屈膝地使用React的实现是一个非常糟糕的主意

如果您需要在父组件中使用嵌套子组件的数据，并且这些数据是广泛分离的，那么您应该通过所有这些子组件传递某种回调支持，或者您应该调度Redux操作，将数据放入存储中，并让父组件订阅该数据

---

是的，很难从描述和示例代码中准确地说出您实际需要做什么，但我可以有把握地说，您得到的不是正确的方法。

@markerikson这样做是有充分理由的。反应单向数据流是一个非常重要的基本规则，但就像st music打破了一些规则（jazz improv），best React应用程序也在非常狡猾的地方打破了一些惯例。例如，Redux和React router必须通过使用上下文来打破惯例。使用REF和使用REF访问组件也存在有效的用例

例如：假设您有一个非常复杂的文本编辑器组件作为父组件。您有许多子组件负责这些字段，例如联系人字段、网站字段和描述字段等。现在，在这些子组件中，您经常更新状态。特别是