组件挂载到 React 后如何创建 Refs？

Posted 2023-04-14

【中文标题】组件挂载到 React 后如何创建 Refs？

【英文标题】：How can you create Refs after the component has mounted in React?

【发布时间】：2020-05-17 00:50:07

【问题描述】：

我的情况要求我对我拥有的每个时间选择器都使用 React.createRef()（时间选择器中有某些功能只能通过 Refs 使用）。

加载页面后，我最初有 2 个时间选择器。当我只有两个时，一切都很好，但我的工作被毁了，因为我需要使用按钮添加/删除时间选择器。所以我可以很容易地添加时间选择器。

但现在我的问题是如何创建 refs ？我对 React.createRef() 的声明位于前 2 个引用的 Constructor() 中。 问题是我在哪里实例化添加 onClick 的时间选择器的参考？

谢谢

【参考方案1】：

您应该将时间选择器包装在另一个组件中，在那里创建 ref 并执行需要在该组件内部使用 ref 的工作，然后通过 props 转发结果（您可以通过 prop 传递函数）。

例如，您可以给每个组件一个唯一的 ID（uuid 做得很好），通过 prop 传递它，传递一个值并传递一个接受 ID 和值的函数，然后在任何时候调用该函数得到来自 ref 的结果。

【参考方案2】：

你可以做这样的事情，但它要求你对每个组件都有一个唯一的标识符，而不是索引。 （因为这可能会改变）

伪代码

class Wrapper extends Component 
   construct() 
      ...
      this.refsById = 
   
   getRefOrCreate(id) 
    if(_has(this.refsById[id]) 
       return this.refsById[id];
     else 
       this.refsById[id] = React.createRef();
       return this.refsById[id];
     
    

  onClickHandler(value, id) 
      const ref = this.refs[id];
      const  onClick  = this.props;
 

  render()
     // Here you need to know how many pickers you need, and their id
    const  pickersInformationArray = this.props; 
    return (
      <div>  pickersInformationArray.map((id) => <TimePicker ref=this.getRefOrCreate(id); onClick=(value) =>  this.onClickHandler(value, id);   ) </div>
    )
  

【参考方案3】：

我找到了解决方案。 先说我在我的错误解决方案中使用了在构造函数中创建ref的方法

 class DummyClass extends Component 
     constructor() 
         this.timePickerRef = React.createRef();
     
 

 render() 
    let timers = array.map( index => 
         <TimePicker
              ref=timepicker => timePickerRef = timepicker 
              value=00
              onChange=(data) => 
                      this.handleTimePcikerValueChange(data, index);
         />
     
   return (
         timers
   )
 

我做的是以下

忽略并删除 this.timePickerRef = React.createRef() 因为它不再需要

而handleTimePcikerValueChange & render中的代码如下：

handleTimePcikerValueChange = (value, index) => 
  // do whatever manipulation you need
  // and access the ref using the following
  this[`timePicker_$index`] 

render() 
    let timers = array.map( index => 
         <TimePicker
              ref=timepicker => this[`timePicker_$index`] = timepicker 
              value=00
              onChange=(data) => 
                      this.handleTimePcikerValueChange(data, index);
         />
     
   return (
         timers
   )
 

我没有发布处理添加时间选择器的代码，因为它无关紧要。 我要感谢那些回复的人！

【讨论】：

这基本上就是我的解决方案在没有使用 React.createRef() 的情况下所做的