React.forwarRef

[yaofly2012]

React.forwardRef

一、语法

1.1 实参：是个渲染函数(render function)

(props, ref) => ReactElement

1. 可以增加displayName属性，方便调试；
2. 不可以含有defaultProps, propTypes属性。

function RenderFunc(props, ref) {
	return  (
		<button ref={ref} className="FancyButton">
		  {props.children}
		</button>
	)
}

RenderFunc.defaultProps = {
	className: 'FancyButton'
}

const FancyButton = React.forwardRef(RenderFunc);

React就会warning了：

Warning: forwardRef render functions do not support propTypes or defaultProps. Did you accidentally pass a React component?

并且此时FancyButton.defaultProps为undefined。正确的用法是：

function RenderFunc(props, ref) {
	return  (
		<button ref={ref} className={props.className}>
		  {props.children}
		</button>
	)
}

const FancyButton = React.forwardRef(RenderFunc);

FancyButton.defaultProps = {
	className: 'FancyButton'
}

1.2 返回值：React组件

返回值才是React组件，此时可以才可以添加defaultProps，propTypes。

1.3 forwardRef render functions do not support propTypes or defaultProps

1. render function并不是React组件，其返回值才是React组件。
   render function只是转发ref的函数，有两个形参(props, ref)，React组件函数只有一个形参(props)。

2. defaultProps, propTypes专属于React组件的，防止误用React做了校验。

二、多子组件的ref？

参考

1. Reactjs: Forwarding Refs
2. Stateless Component: React.forwardRef make defaultProps invalid