关于react16.4——转发refs和片段Fragment

时间:2021-12-04 05:34:19

1.转发refs

Ref 转发是一种自动将 ref 通过组件传递给子组件的技术。

一些组件倾向于以与常规 DOM button 和 input 类似的方式在整个应用程序中使用, 并且访问他们的 DOM 节点可能不可避免地用于管理 焦点(focus),选择(selection)或动画(animations)。

这就需要使用React.forwardRef来获取传递给它的ref,然后转发给它渲染的DOM。

例如,

//ref.current 将指向 <button> DOM节点
const FancyButton = React.forwardRef((props, ref) => (
<button ref={ref} className="FancyButton">
{props.children}
</button>
)); // 现在可以直接获取button的ref
const ref = React.createRef();
<FancyButton ref={ref}>Click me!</FancyButton>;

 回调函数方式的ref: 参考 https://blog.csdn.net/liangklfang/article/details/72858295

2.片段Fragments

React 中一个常见模式是为一个组件返回多个元素。 片段(fragments) 可以让你将子元素列表添加到一个分组中,并且不会在DOM 中增加额外节点。

例如,

import React, { Component, Fragment } from 'react';
export default class App extends Component { render() {
return (
<Fragment>
{this.props.children}
</Fragment>
);
}
}