通过 cloneElement reactjs 传递 forwardRef

Question

const ref = useRef()  

 React.Children.map(this.props.children, (element) => {

   React.cloneElement(element, { 

     innerRef: node => ref,

   })

 })

这里元素是一个组件

像下面这样

const newComponent = forwardRef(({children, ...otherprops}, ref){

    return (

     <div {...otherprops} ref={otherprops.innerRef}>

       {children}

     </div>

    )        

})

得到ref是null在 forwardRef ...

可重现的示例：- https://codesandbox.io/s/forward-ref-cloneelement-1msjp

Answer 1

尝试更改innerRef为ref，您添加innerRef属性并期望它在以下时间有效ref：import React, { useRef } from 'react';function RefForm(props) {&nbsp; const setRefs = useRef(new Map()).current;&nbsp; const { children } = props;&nbsp; return (&nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; {React.Children.map(children, child => {&nbsp; &nbsp; &nbsp; &nbsp; return React.cloneElement(child, {//&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;v not innerRef&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ref: node => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log('imHere');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return !node&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ? setRefs.delete(child.key)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; : setRefs.set(child.key, node);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; })}&nbsp; &nbsp; </div>&nbsp; );}export default RefForm;然后，您可以根据需要超出 ref：const Email = React.forwardRef((props, ref) => {&nbsp; console.log('email--', ref);&nbsp; ref(); // logs "imHere"&nbsp; return (&nbsp; &nbsp; <div style={{ marginTop: '30px' }}>&nbsp; &nbsp; &nbsp; <label>this is email</label>&nbsp; &nbsp; &nbsp; <input name="email" ref={props.innerRef} />&nbsp; &nbsp; </div>&nbsp; );});编辑：对于类组件需要使用另一个键 thenref。上面的例子有一个警告：refs 不会被传递。那是因为 ref 不是道具。和 key 一样，React 对它的处理方式也不同。如果向 HOC 添加 ref，则 ref 将引用最外层的容器组件，而不是包装的组件。// class componentclass Name extends Component {&nbsp; render() {&nbsp; &nbsp; console.log('name--', this.props.innerRef);&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; <div style={{ marginTop: '30px' }}>&nbsp; &nbsp; &nbsp; &nbsp; <label>this is name</label>&nbsp; &nbsp; &nbsp; &nbsp; <input name="name" ref={this.props.innerRef} />&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; );&nbsp; }}// functional componentconst Email = props => {&nbsp; console.log('email--', props.innerRef);&nbsp; return (&nbsp; &nbsp; <div style={{ marginTop: '30px' }}>&nbsp; &nbsp; &nbsp; <label>this is email</label>&nbsp; &nbsp; &nbsp; <input name="email" ref={props.innerRef} />&nbsp; &nbsp; </div>&nbsp; );};// cloneElementfunction RefForm(props) {&nbsp; const setRefs = useRef(new Map()).current;&nbsp; const { children } = props;&nbsp; return (&nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; {React.Children.map(children, child => {&nbsp; &nbsp; &nbsp; &nbsp; return React.cloneElement(child, {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; innerRef: node => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return !node&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ? setRefs.delete(child.key)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; : setRefs.set(child.key, node);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; })}&nbsp; &nbsp; </div>&nbsp; );}