javascript - 将引用传递给 Prop 的正确方法是什么？

Question

我正在尝试将一个组件的引用传递给另一个组件。自 string refs are being deprecated我正在使用回调引用。

所以我有类似的东西:

<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上的 Prop 获取已安装组件的引用。

那么将引用传递给另一个组件的正确方法是什么？

编辑

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

这种方法的问题是您无法创建可重用的逻辑，并且必须在这些封装组件中一遍又一遍地重复相同的逻辑。

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

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

在此示例中<Form>自 this.props.children 以来无法访问子级的实例(和方法)不返回这些实例。它返回一些伪组件列表。

那么如何检查某个 <Input/> 是否存在？在未传递引用的情况下检测到验证错误？

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

Answer 1

一般来说，“ref”功能是 React 中的反模式。它的存在是为了实现副作用驱动的开发，但是为了从 React 编程方式中获益最多，您应该尽可能避免“引用”。

对于您的特定问题，将 child 的引用传递给其 sibling 是鸡与蛋的情况。 ref 回调是在子组件安装时触发的，而不是在渲染期间触发，这就是您的示例不起作用的原因。您可以尝试的一件事是将 ref 插入状态，然后从状态读取到另一个 child 。所以:

<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