React：将ref传递给道具的正确方法是什么？ [英] React: what's the proper way of passing a ref to a prop?
问题描述
我正在尝试将组件的引用传递给另一个组件。由于字符串引用已被弃用，我正在使用回调引用。
所以我有类似的东西：
< One ref = {c => this.one = c} />
< Two one = {this.one} />
问题是每当我尝试访问 this.props.one 里面两个我得到未定义。
我甚至尝试过两个：
componentDidMount（ ）{
setTimeout（（）=> {
console.log（this.props.one）;
}，5000）
}
似乎问题是，当创建道具时，ref还不存在，因为它创建一次一个已安装。但我不知道如何刷新两个上的道具，以获得已安装组件的参考。
<那么将参考传递给另一个组件的正确方法是什么？
编辑
有些用户建议将该逻辑封装在更高的组件中，该组件本身会呈现其他子组件。
这种方法的问题在于你可以'创建可重用的逻辑，你必须在这些封装组件中反复重复相同的逻辑。
假设你要创建一个通用的< ;表单> 组件，它将提交逻辑封装到您的商店，错误检查等。您执行以下操作：
<表>
<输入/>
<输入/>
<输入/>
<输入/>
< SubmitButton />
< / Form>
在此示例中< Form> 可以因为 this.props.children 不返回这些实例，所以不能访问子节点的实例（和方法）。它返回一些伪组件列表。
那么如何检查某个< Input /> 在没有传递ref的情况下检测到验证错误？
您必须使用验证逻辑将这些组件封装在另一个组件中。例如，在< UserForm> 中。但由于每个表单都不同，因此必须在< CategoryForm> ，< GoupForm> 中复制相同的逻辑，这是非常低效的，这就是为什么我想在< Form> 中封装验证逻辑并传递< Input> <的引用/ code>组件到< Form> 。
通常，ref功能是React中的反模式。它的存在是为了实现副作用驱动的开发，但是为了从React的编程方式中获得最大的好处，你应尽量避免使用refs。
As对于你的特殊问题，给一个孩子传递一个参考它的兄弟是一个鸡与蛋的情景。挂载子进程时会触发ref回调，而不是在渲染期间触发，这就是为什么示例不起作用的原因。你可以尝试的一件事是将ref推入状态，然后从状态读到另一个孩子。所以：
< One ref = {c => ！this.state.one&& this.setState（{one：c}）} />
< Two one = {this.state.one} />
注意：没有！this.state.one 这将导致无限循环。
这是一个有效的代码示例（查看控制台以查看兄弟参考记录）： http://codepen.io/anon/pen/pbqvRA
I'm trying to pass a ref of a component to another component. Since string refs are being deprecated I'm using callback refs.
So I have something similar to this:
<One ref={c => this.one = c}/>
<Two one={this.one}/>
The problem is that whenever I try to access this.props.one inside Two I get undefined.
I have even tried this on Two:
componentDidMount(){
setTimeout(()=>{
console.log(this.props.one);
},5000)
}
It seems the problem is that when the prop is created, the ref doesn't exist yet since it's created once One is mounted. But I don't know how to "refresh" the props on Two to get the ref to the mounted component.
So what's the proper way of passing a ref to another component?
Edit
Some users have suggested to encapsulate that logic in a higher component, which in itself renders those other child components.
The problem with that approach is that you can't create reusable logic and you have to repeat the same logic over and over in those encapsulating components.
Let's say you want to create a generic <Form> component which encapsulates the submit logic to your store, error checking, etc. And you do something like this:
<Form>
<Input/>
<Input/>
<Input/>
<Input/>
<SubmitButton/>
</Form>
In this example <Form> can't access the instances (and methods) of the children since this.props.children doesn't return those instances. It returns some list of pseudo components.
So how can you check if a certain <Input/> has detected a validation error without passing a ref?
You have to encapsulate those components in another component with the validation logic. For example in <UserForm>. But since each form is different the same logic has to be copied in <CategoryForm>, <GoupForm>, etc. This is terribly inefficient which is why I want to encapsulate the validation logic in <Form> and pass references of the <Input> components to <Form>.
In general the "ref" feature is an anti-pattern in React. It exists to enable side-effect driven development, however in order to benefit the most from the React way of programming you should try to avoid "refs" if possible.
As for your particular issue, passing a child a ref to it's sibling is a chicken vs. egg scenario. The ref callback is fired when the child is mounted, not during render which is why your example doesn't work. One thing you can try is pushing the ref into state and then reading from state into the other child. So:
<One ref={c => !this.state.one && this.setState({ one: c })}/>
<Two one={this.state.one}/>
Note: without the !this.state.one this will cause an infinite loop.
Here is a codepen example of this working (look at the console to see the sibling ref logged): http://codepen.io/anon/pen/pbqvRA
这篇关于React：将ref传递给道具的正确方法是什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
