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

【问题标题】：How can you create Refs after the component has mounted in React?组件挂载到 React 后如何创建 Refs？
【发布时间】：2023-03-04 19:51:01
【问题描述】：

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

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

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

谢谢

【问题讨论】：

标签： reactjs react-ref

【解决方案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() 的情况下所做的