首页 >> js开发 >> jsReact中Ref 的使用方法详解js大全
jsReact中Ref 的使用方法详解js大全
发布时间: 2021年1月13日 | 浏览:
| 分类:js开发
本文实例讲述了React中Ref 的使用方法。分享给大家供大家参考，具体如下：React中Ref 的使用 React v16.6.3在典型的React数据流中，props是父组件与其子组件交互的唯一方式。要修改子项，请使用new props 重新呈现它。但是，在某些情况下，需要在典型数据流之外强制修改子项。要修改的子项可以是React组件的实例，也可以是DOM元素。对于这两种情况，React都提供了api。何时使用refsrefs有一些很好的用例：
1.文本选择或媒体播放。
2.触发势在必行的动画。
3.与第三方DOM库集成。
1.文本选择或媒体播放。2.触发势在必行的动画。3.与第三方DOM库集成。避免将refs用于可以声明性地完成的任何操作。*不要过度使用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 (
type="text"
ref={this.setTextInputRef}
/>
type="button"
value="Focus the text input"
onClick={this.focusTextInput}
/>
);
}
}
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 (
type="text"
ref={this.setTextInputRef}
/>
type="button"
value="Focus the text input"
onClick={this.focusTextInput}
/>
);
}
}
refs例子--点击获取input焦点refs例子--点击获取input焦点
class Example extends React.Component {
handleClick() {
// 使用原生的 DOM API 获取焦点
this.refs.myInput.focus
();
}
render() {
// 当组件插入到 DOM 后，ref 属性添加一个组件的引用于到 this.refs
return (
type="button"
value="点我输入框获取焦点"
onClick={this.handleClick.bind(this)}
/>
);
}
}
class Example extends React.Component {
handleClick() {
// 使用原生的 DOM API 获取焦点
this.refs.myInput.focus
();
}
render() {
// 当组件插入到 DOM 后，ref 属性添加一个组件的引用于到 this.refs
return (
type="button"
value="点我输入框获取焦点"
onClick={this.handleClick.bind(this)}
/>
);
}
}
使用React.createRef()React.createRef()React 16.3中引入的API。如果您使用的是早期版本的React，我们建议您使用回调引用。创建React.createRef()创建React.createRef()Refs是使用属性创建的，React.createRef()并通过ref属性附加到React元素。在构造组件时，通常将Refs分配给实例属性，以便可以在整个组件中引用它们。
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.myRef = React.createRef();
}
render() {
return ;
}
}
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.myRef = React.createRef();
}
render() {
return ;
}
}
访问ref访问ref当ref被传递给元素时render，对该节点的引用变得可以在currentref 的属性处访问
const node = this.myRef.current;
const node = this.myRef.current;
ref的值根据节点的类型而有所不同ref的值根据节点的类型而有所不同
当在refHTML元素上使用该属性时，ref在构造函数中创建的属性将React.createRef()接收底层DOM元素作为其current属性。
在ref自定义类组件上使用该属性时，该ref对象将接收组件的已安装实例作为其current。
当在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 ref
// with the `textInput` that we created in the constructor
return (
type="text"
ref={this.textInput} />
type="button"
value="Focus the text input"
onClick={this.focusTextInput}
/>
);
}
}
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 ref
// with the `textInput` that we created in the constructor
return (
type="text"
ref={this.textInput} />
type="button"
value="Focus the text input"
onClick={this.focusTextInput}
/>
);
}
}
current当组件安装时，React将为该属性分配DOM元素，并null在卸载时将其分配回。ref更新发生之前componentDidMount或componentDidUpdate生命周期方法。current当组件安装时，React将为该属性分配DOM元素，并null在卸载时将其分配回。ref更新发生之前componentDidMount或componentDidUpdate生命周期方法。无法在函数组件上使用ref属性无法在函数组件上使用ref属性
function MyFunctionComponent() {
return ;
}
class Parent extends React.Component {
constructor(props) {
super(props);
this.textInput = React.createRef();
}
render() {
// This will *not* work!
return (
);
}
}
function MyFunctionComponent() {
return ;
}
class Parent extends React.Component {
constructor(props) {
super(props);
this.textInput = React.createRef();
}
render() {
// This will *not* work!
return (
);
}
}
**如果需要引用它，则应该将组件转换为类，就像您需要生命周期方法或状态时一样。
但是，只要引用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 (
type="text"
ref={textInput} />
type="button"
value="Focus the text input"
onClick={handleClick}
/>
);
}
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 (
type="text"
ref={textInput} />
type="button"
value="Focus the text input"
onClick={handleClick}
/>
);
}
将DOM引用公开给父组件将DOM引用公开给父组件在极少数情况下，可能希望从父组件访问子节点的DOM节点。通常不建议这样做，因为它会破坏组件封装，但它偶尔可用于触发焦点或测量子DOM节点的大小或位置。虽然可以向子组件添加引用，但这不是一个理想的解决方案，因为只能获得组件实例而不是DOM节点。此外，这不适用于功能组件。如果使用React 16.3或更高版本，我们建议在这些情况下使用ref forwarding。引用转发允许组件选择将任何子组件的引用公开为自己的组件。可以在ref转发文档中找到有关如何将子DOM节点公开给父组件的详细示例。如果您使用React 16.2或更低版本，或者您需要比ref转发提供的灵活性，您可以使用此替代方法并明确地将ref作为不同名称的prop传递。如果可能，建议不要暴露DOM节点，但它可以是一个有用的逃生舱。请注意，此方法要求向子组件添加一些代码。如果您完全无法控制子组件实现，则最后一个选项是使用findDOMNode()，但不鼓励使用它StrictMode。希望本文所述对大家react程序设计有所帮助。
1.文本选择或媒体播放。
2.触发势在必行的动画。
3.与第三方DOM库集成。
1.文本选择或媒体播放。2.触发势在必行的动画。3.与第三方DOM库集成。避免将refs用于可以声明性地完成的任何操作。*不要过度使用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 (
type="text"
ref={this.setTextInputRef}
/>
type="button"
value="Focus the text input"
onClick={this.focusTextInput}
/>
);
}
}
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 (
type="text"
ref={this.setTextInputRef}
/>
type="button"
value="Focus the text input"
onClick={this.focusTextInput}
/>
);
}
}
refs例子--点击获取input焦点refs例子--点击获取input焦点
class Example extends React.Component {
handleClick() {
// 使用原生的 DOM API 获取焦点
this.refs.myInput.focus
();
}
render() {
// 当组件插入到 DOM 后，ref 属性添加一个组件的引用于到 this.refs
return (
type="button"
value="点我输入框获取焦点"
onClick={this.handleClick.bind(this)}
/>
);
}
}
class Example extends React.Component {
handleClick() {
// 使用原生的 DOM API 获取焦点
this.refs.myInput.focus
();
}
render() {
// 当组件插入到 DOM 后，ref 属性添加一个组件的引用于到 this.refs
return (
type="button"
value="点我输入框获取焦点"
onClick={this.handleClick.bind(this)}
/>
);
}
}
使用React.createRef()React.createRef()React 16.3中引入的API。如果您使用的是早期版本的React，我们建议您使用回调引用。创建React.createRef()创建React.createRef()Refs是使用属性创建的，React.createRef()并通过ref属性附加到React元素。在构造组件时，通常将Refs分配给实例属性，以便可以在整个组件中引用它们。
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.myRef = React.createRef();
}
render() {
return ;
}
}
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.myRef = React.createRef();
}
render() {
return ;
}
}
访问ref访问ref当ref被传递给元素时render，对该节点的引用变得可以在currentref 的属性处访问
const node = this.myRef.current;
const node = this.myRef.current;
ref的值根据节点的类型而有所不同ref的值根据节点的类型而有所不同
当在refHTML元素上使用该属性时，ref在构造函数中创建的属性将React.createRef()接收底层DOM元素作为其current属性。
在ref自定义类组件上使用该属性时，该ref对象将接收组件的已安装实例作为其current。
当在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 ref
// with the `textInput` that we created in the constructor
return (
type="text"
ref={this.textInput} />
type="button"
value="Focus the text input"
onClick={this.focusTextInput}
/>
);
}
}
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 ref
// with the `textInput` that we created in the constructor
return (
type="text"
ref={this.textInput} />
type="button"
value="Focus the text input"
onClick={this.focusTextInput}
/>
);
}
}
current当组件安装时，React将为该属性分配DOM元素，并null在卸载时将其分配回。ref更新发生之前componentDidMount或componentDidUpdate生命周期方法。current当组件安装时，React将为该属性分配DOM元素，并null在卸载时将其分配回。ref更新发生之前componentDidMount或componentDidUpdate生命周期方法。无法在函数组件上使用ref属性无法在函数组件上使用ref属性
function MyFunctionComponent() {
return ;
}
class Parent extends React.Component {
constructor(props) {
super(props);
this.textInput = React.createRef();
}
render() {
// This will *not* work!
return (
);
}
}
function MyFunctionComponent() {
return ;
}
class Parent extends React.Component {
constructor(props) {
super(props);
this.textInput = React.createRef();
}
render() {
// This will *not* work!
return (
);
}
}
**如果需要引用它，则应该将组件转换为类，就像您需要生命周期方法或状态时一样。
但是，只要引用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 (
type="text"
ref={textInput} />
type="button"
value="Focus the text input"
onClick={handleClick}
/>
);
}
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 (
type="text"
ref={textInput} />
type="button"
value="Focus the text input"
onClick={handleClick}
/>
);
}
将DOM引用公开给父组件将DOM引用公开给父组件在极少数情况下，可能希望从父组件访问子节点的DOM节点。通常不建议这样做，因为它会破坏组件封装，但它偶尔可用于触发焦点或测量子DOM节点的大小或位置。虽然可以向子组件添加引用，但这不是一个理想的解决方案，因为只能获得组件实例而不是DOM节点。此外，这不适用于功能组件。如果使用React 16.3或更高版本，我们建议在这些情况下使用ref forwarding。引用转发允许组件选择将任何子组件的引用公开为自己的组件。可以在ref转发文档中找到有关如何将子DOM节点公开给父组件的详细示例。如果您使用React 16.2或更低版本，或者您需要比ref转发提供的灵活性，您可以使用此替代方法并明确地将ref作为不同名称的prop传递。如果可能，建议不要暴露DOM节点，但它可以是一个有用的逃生舱。请注意，此方法要求向子组件添加一些代码。如果您完全无法控制子组件实现，则最后一个选项是使用findDOMNode()，但不鼓励使用它StrictMode。希望本文所述对大家react程序设计有所帮助。
刚刚发布热门点击发布时间
- [05/19]前端外包开发:git 舍弃本地代码强制从远程库更新
- [05/19]git 提交 忽略husky git 提交 忽略eslint 检测
- [05/18]前端外包工具:如何npm清理缓冲yarn,pnpm 清理缓存
- [05/18]前端开发工具:npm和pnpm有什么区别?pnpm安装
- [05/18]前端开发:npm与yarn的区别
- [07/09]Chrome抓取页面内容代码|chrome插件获取页面数据
- [07/09]谷歌浏览器数据采集插件开发|谷歌浏览器的采集功能
- [07/09]Chrome插件轻松抓取网络数据,Chrome插件轻松抓取网页源码数据
- [07/09]chrome插件怎么安装?chrome插件开发如何安装chrome插件
- [07/09]快速chrome插件开发-北京chrome插件开发外包
- [12/31]清大光德落地护眼灯|清大光德儿童护眼灯
- [07/20]网站无障碍适老化外包改造私有化过程遇到问题整理
- [07/19]适老化改造工信部明确APP适老化规范：禁广告弹窗，网站需提供特大字体
- [07/19]适老化改造包括哪些方面?
- [07/19]什么是适老化改造？
