将引用传递给道具的正确方法是什么？

Question

我试图将一个组件的引用传递给另一个组件。由于不推荐使用字符串引用，因此我使用了回调引用。

所以我有类似的东西：

<One ref={c => this.one = c}/>
<Two one={this.one}/>

问题是，每当我尝试访问this.props.one内部时，Two我都会得到undefined。

我什至尝试过Two：

componentDidMount(){
    setTimeout(()=>{
        console.log(this.props.one);
    },5000)
}

似乎问题在于，当创建prop时，ref并不存在，因为它是在One安装后创建的。但是我不知道如何“刷新”道具Two以获取对已安装组件的参考。

那么将ref传递到另一个组件的正确方法是什么？

编辑

一些用户建议将该逻辑封装在一个更高的组件中，该组件本身将呈现那些其他子组件。

这种方法的问题在于，您不能创建可重用的逻辑，而必须在那些封装组件中一遍又一遍地重复相同的逻辑。

假设您要创建一个通用<Form>组件，该组件封装了向商店提交逻辑，错误检查等。您可以执行以下操作：

<Form>
    <Input/>
    <Input/>
    <Input/>
    <Input/>
    <SubmitButton/> 
</Form>

在此示例<Form>中，由于this.props.children不返回这些实例，因此无法访问其实例（和方法）。它返回一些伪组件列表。

那么，如何在<Input/>不通过引用的情况下检查某人是否检测到验证错误呢？

您必须使用验证逻辑将这些组件封装在另一个组件中。例如在中<UserForm>。但是由于每种形式都不同，因此必须在<CategoryForm>，<GoupForm>等中复制相同的逻辑。这效率极低，这就是为什么我要封装验证逻辑<Form>并将<Input>组件的引用传递给的原因<Form>。

Answer 1

通常，“ ref”功能是React中的反模式。它的存在是为了实现副作用驱动的开发，但是为了从React编程方式中获得最大收益，您应该尽可能避免使用“
refs”。

至于您的特定问题，让孩子参考同级是鸡与蛋的关系。加载子项时（而不是在渲染期间）会触发ref回调，这就是您的示例无法正常工作的原因。您可以尝试的一件事是将ref推入状态，然后从状态读入另一个子级。所以：

<One ref={c => !this.state.one && this.setState({ one: c })}/>
<Two one={this.state.one}/>

注意：没有，!this.state.one将导致无限循环。

这是此工作的codepen示例（请在控制台上查看已记录的同级引用）：http :
//codepen.io/anon/pen/pbqvRA