快活林资源网

React中Ref 的使用方法详解
网络编程 2024/12/23 佚名
3 1
快活林资源网 Design By www.csstdc.com

本文实例讲述了React中Ref 的使用方法。分享给大家供大家参考，具体如下：

React中Ref 的使用 React v16.6.3

在典型的React数据流中，props是父组件与其子组件交互的唯一方式。要修改子项，请使用new props 重新呈现它。但是，在某些情况下，需要在典型数据流之外强制修改子项。要修改的子项可以是React组件的实例，也可以是DOM元素。对于这两种情况，React都提供了api。

何时使用refs

refs有一些很好的用例：

  • 1.文本选择或媒体播放。
  • 2.触发势在必行的动画。
  • 3.与第三方DOM库集成。

避免将refs用于可以声明性地完成的任何操作。

*不要过度使用Refs

旧版API：字符串引用

如果您之前使用过React，那么您可能熟悉一个旧的API，其中ref属性是一个字符串"textInput"，并且DOM节点被访问为this.refs.textInput。建议不要使用它，因为字符串引用有一些问题，被认为是遗留问题，很可能会在未来的某个版本中删除。

回调引用

当组件安装时，React将使用DOM元素调用ref回调，并在卸载时调用null。

在componentDidMount或componentDidUpdate触发之前，Refs保证是最新的.

class CustomTextInput extends React.Component {
 constructor(props) {
 super(props);

 this.textInput = null;

 this.setTextInputRef = element => {
  this.textInput = element;
 };

 this.focusTextInput = () => {
  // Focus the text input using the raw DOM API
  if (this.textInput) this.textInput.focus();
 };
 }

 componentDidMount() {
 // autofocus the input on mount
 this.focusTextInput();
 }

 render() {
 // Use the `ref` callback to store a reference to the text input DOM
 // element in an instance field (for example, this.textInput).
 return (
  <div>
  <input
   type="text"
   ref={this.setTextInputRef}
  />
  <input
   type="button"
   value="Focus the text input"
   onClick={this.focusTextInput}
  />
  </div>
 );
 }
}

refs例子--点击获取input焦点

class Example extends React.Component {
 handleClick() {
 // 使用原生的 DOM API 获取焦点
 this.refs.myInput.focus
 ();
 }
 render() {
 // 当组件插入到 DOM 后，ref 属性添加一个组件的引用于到 this.refs
 return (
  <div>
  <input type="text" ref="myInput" />
  <input
   type="button"
   value="点我输入框获取焦点"
   onClick={this.handleClick.bind(this)}
  />
  </div>
 );
 }
}

使用React.createRef()

React.createRef()React 16.3中引入的API。如果您使用的是早期版本的React，我们建议您使用回调引用。

创建React.createRef()

Refs是使用属性创建的，React.createRef()并通过ref属性附加到React元素。在构造组件时，通常将Refs分配给实例属性，以便可以在整个组件中引用它们。

class MyComponent extends React.Component {
 constructor(props) {
 super(props);
 this.myRef = React.createRef();
 }
 render() {
 return <div ref={this.myRef} />;
 }
}

访问ref

当ref被传递给元素时render，对该节点的引用变得可以在currentref 的属性处访问

const node = this.myRef.current;

ref的值根据节点的类型而有所不同

  • 当在refHTML元素上使用该属性时，ref在构造函数中创建的属性将React.createRef()接收底层DOM元素作为其current属性。
  • 在ref自定义类组件上使用该属性时，该ref对象将接收组件的已安装实例作为其current。

您可能无法ref在函数组件上使用该属性，因为它们没有实例。

class CustomTextInput extends React.Component {
 constructor(props) {
 super(props);
 // create a ref to store the textInput DOM element
 this.textInput = React.createRef();
 this.focusTextInput = this.focusTextInput.bind(this);
 }

 focusTextInput() {
 // Explicitly focus the text input using the raw DOM API
 // Note: we're accessing "current" to get the DOM node
 this.textInput.current.focus();
 }

 render() {
 // tell React that we want to associate the <input> ref
 // with the `textInput` that we created in the constructor
 return (
  <div>
  <input
   type="text"
   ref={this.textInput} />

  <input
   type="button"
   value="Focus the text input"
   onClick={this.focusTextInput}
  />
  </div>
 );
 }
}

current当组件安装时，React将为该属性分配DOM元素，并null在卸载时将其分配回。ref更新发生之前componentDidMount或componentDidUpdate生命周期方法。

无法在函数组件上使用ref属性

function MyFunctionComponent() {
 return <input />;
}

class Parent extends React.Component {
 constructor(props) {
 super(props);
 this.textInput = React.createRef();
 }
 render() {
 // This will *not* work!
 return (
  <MyFunctionComponent ref={this.textInput} />
 );
 }
}

**如果需要引用它，则应该将组件转换为类，就像您需要生命周期方法或状态时一样。
但是，只要引用DOM元素或类组件，就可以在函数组件中使用该ref属性：**

function CustomTextInput(props) {
 // textInput must be declared here so the ref can refer to it
 let textInput = React.createRef();

 function handleClick() {
 textInput.current.focus();
 }

 return (
 <div>
  <input
  type="text"
  ref={textInput} />

  <input
  type="button"
  value="Focus the text input"
  onClick={handleClick}
  />
 </div>
 );
}

将DOM引用公开给父组件

在极少数情况下，可能希望从父组件访问子节点的DOM节点。通常不建议这样做，因为它会破坏组件封装，但它偶尔可用于触发焦点或测量子DOM节点的大小或位置。

虽然可以向子组件添加引用，但这不是一个理想的解决方案，因为只能获得组件实例而不是DOM节点。此外，这不适用于功能组件。

如果使用React 16.3或更高版本，我们建议在这些情况下使用ref forwarding。引用转发允许组件选择将任何子组件的引用公开为自己的组件。可以在ref转发文档中找到有关如何将子DOM节点公开给父组件的详细示例。

如果您使用React 16.2或更低版本，或者您需要比ref转发提供的更多灵活性，您可以使用此替代方法并明确地将ref作为不同名称的prop传递。

如果可能，建议不要暴露DOM节点，但它可以是一个有用的逃生舱。请注意，此方法要求向子组件添加一些代码。如果您完全无法控制子组件实现，则最后一个选项是使用findDOMNode()，但不鼓励使用它StrictMode。

希望本文所述对大家react程序设计有所帮助。

快活林资源网 Design By www.csstdc.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
快活林资源网 Design By www.csstdc.com
www.csstdc.com 快活林资源网
120,135影音资源
344,641技术资源
22,817软件资源
435,032站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
快活林资源网 Design By www.csstdc.com