reactjs 为什么不能在react中传递一个ref给函数组件?

qxgroojn  于 5个月前  发布在  React
关注(0)|答案(3)|浏览(61)

为什么不能在react中传递一个ref给函数组件?
函数组件与类组件相比有什么不同,你不能向它传递引用?
为什么不可能?

  • 备注 *:我提出这个问题,因为我总是看到关于如何使用ref与函数组件的解释,你需要使用fowardRef,但没有人解释react如何处理函数组件,使其不可能传递ref给它,它总是解释如何做到这一点,但从来没有解释为什么你需要这样做。
doinxwow

doinxwow1#

当你将ref传递给一个类组件时,它会指向(通过ref.current)实际的类示例。(参见遗留React文档中的“引用引用”。)这让你可以访问该示例的字段。但是函数组件没有 * 示例或字段,所以ref没有指向的东西,也没有它可以使用的东西。
forwardRef仍然不允许ref指向示例,因为示例仍然不存在。相反,forwardRef允许您将引用“转发”到另一个对象:嵌套组件(通常是DOM元素)或您定义的自定义对象(使用useImperativeHandle)。
如果React现在从头开始设计,ref可能会有一些不同,但由于它的历史-因为它对类组件有特殊的意义-ref被保留了下来。
但是,您可以使用另一个prop名称(如innerRef)并将其用于转发,如Why, exactly, do we need React.forwardRef?所述。

sh7euo9m

sh7euo9m2#

我在谷歌上搜索了同样的问题:为什么不能像React中的props一样传递ref?我在React文档中找到了答案:
上面的例子有一个警告:refs不会被传递。这是因为ref不是一个prop。就像key一样,React对它的处理方式不同。如果你向HOC添加一个ref,ref将引用最外面的容器组件,而不是被 Package 的组件。
https://reactjs.org/docs/forwarding-refs.html
我希望那能给给予你一个满意的答案!

2lpgd968

2lpgd9683#

因为,这对函数组件没有多大意义,因为它们没有this。另一方面,在类组件上使用ref本质上是将refObj.current绑定到类的示例(this)本身,并访问公共字段和方法,但不能访问该类的静态属性/方法。为了详细说明这一点,考虑以下示例:

//import { Component, createRef } from 'react';

class Mybtn extends React.Component {
   constructor(props) {
      super(props);
    }
  myprop = 33;         //Is  accessible via ref attribute
  static myprop2 = 44; //not accessible via ref attribute
  Log(){
    console.log(this.props);
  }
  render(){    
    return (      
      <button>test</button>
    )
  }
}

function Mybtn2() {
  return <button>TTT</button>;
}

class Form extends React.Component {
  inputRef = React.createRef();

  handleClick = () => {    
    this.inputRef.current.Log(); //same as calling this.Log() from inside Mybtn
    console.log(this.inputRef.current.myprop);  //instance's field
    console.log(this.inputRef.current.myprop2); //can't access static fields, but can access instance's field 
  }

  render() {
    return (
      <div>
        <input ref={this.inputRef2} />
        <button onClick={this.handleClick}>
          Handle click
        </button>
        <Mybtn ref={this.inputRef} prop1="tst"></Mybtn>
        <Mybtn2 ref={this.inputRef3} prop1="tst"></Mybtn2>
      </div>
    );
  }
}

//ReactDOM.createRoot(document.getElementById('app').render('Form')

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

个字符
我假设,React内部将ref属性绑定到class的示例。所以当它在函数组件上遇到ref时,babel可能会检查它是基于类的(示例)组件还是函数组件。

相关问题