如何使用 React.createRef() 在 React 中访问多个 Dom 元素

Posted 2023-03-16

【中文标题】如何使用 React.createRef() 在 React 中访问多个 Dom 元素

【英文标题】：How to access more than one element of Dom in react using React.createRef()

【发布时间】：2020-08-24 23:31:57

【问题描述】：

我知道如何使用 React.createRef() 访问 dom 的单个元素。但我想使用 createRef 访问两个不同的元素。我在***上看到了一些用于动态访问多个元素但无法理解的示例。我在这里附上了我想要更改按钮的span标签onClick的背景颜色的简单代码。 我跟着这个反应文档。有人可以指导我，我在这里做错了什么。

class TodoApp extends React.Component 
  constructor(props) 
    super(props)
    // this.myRef = React.createRef();
    this.textInput = null;

    this.state = 
      fname:""
    
  

  setTextInputRef = element => 
    console.log("element",element);
    this.textInput = element;
  ;

green = () =>
  console.log("green ",this.textInput);
  /*   this.textInput.current.style.backgroundColor = "green"; */
  this.textInput.style.backgroundColor = "green";


red = () =>
  console.log("red ",this.textInput);
  /*   this.textInput.current.style.backgroundColor = "red"; */
  this.textInput.style.backgroundColor = "red";


  render() 
    return (
      <div>
      /* 
      <span id="green" ref=input =>  this.setTextInputRef = input; >Green</span><br/>
      <span id="red" ref=input =>  this.setTextInputRef = input; >Red</span><br/> 
      */
      <span id="green" ref=this.setTextInputRef>Green</span><br/>
      <span id="red" ref=this.setTextInputRef>Red</span><br/>
      <button onClick=this.green>For Green</button><br/>
      <button onClick=this.red>For Red</button><br/>
      </div>
    )
  


ReactDOM.render(<TodoApp />, document.querySelector("#app"))

在上面的代码中，如果用户点击 btn，那么相应的跨度颜色应该会改变。

我们将不胜感激。

here is jsfiddle for more info

【问题讨论】：

为什么不设置按钮点击状态，并将样式作为道具传递给<span>s？ DOM 引用是反应式编程的最后手段。

实际上我正在寻找如何使用 creareRef 访问多个元素。

【参考方案1】：

如果渲染的元素是静态的，您可以在构造函数中创建多个引用并使用 this.myRef.current 访问元素

您的 createRef 代码如下所示

import React from "react";
import "./styles.css";

export default class TodoApp extends React.Component 
  constructor(props) 
    super(props);
    this.greenInputRef = React.createRef();
    this.redInputRef = React.createRef();
    this.state = 
      fname: ""
    ;
  

  green = () => 
    console.log("green ", this.textInput);
    /*   this.textInput.current.style.backgroundColor = "green"; */
    this.greenInputRef.current.style.backgroundColor = "green";
  ;

  red = () => 
    console.log("red ", this.textInput);
    /*   this.textInput.current.style.backgroundColor = "red"; */
    this.redInputRef.current.style.backgroundColor = "red";
  ;

  render() 
    return (
      <div>
        /* 
      <span id="green" ref=input =>  this.setTextInputRef = input; >Green</span><br/>
      <span id="red" ref=input =>  this.setTextInputRef = input; >Red</span><br/> 
      */
        <span id="green" ref=this.greenInputRef>
          Green
        </span>
        <br />
        <span id="red" ref=this.redInputRef>
          Red
        </span>
        <br />
        <button onClick=this.green>For Green</button>
        <br />
        <button onClick=this.red>For Red</button>
        <br />
      </div>
    );
  

Working Demo

如果你通过循环来动态渲染代码sn-p，你可以通过以下方式创建ref

constructor(props) 
   super(props);

   props.data.forEach(item => 
      this[`dataRef$item.id] = React.createRef();
   )
  

...
render() 
   return (
       <div>
        
           data.map(item => 
              <p ref=this[`dataRefitem.id]>item.name</p>
           )
         
       </div>
   )

【讨论】：

感谢@Shubham 非常感谢您的时间。我怀疑如果我想要两个或三个以上的静态元素，为每个 dom 元素创建多个 React.createRef() 实例是否正确?或者这是静态元素渲染的唯一方法。

您确实需要创建与要访问的组件一样多的引用。牢记虚拟 DOM，没有其他替代方法可以访问元素。但是，您必须尽可能避免使用 refs