Javascript 通过cloneElement reactjs传递forwardRef

这里元素是一个组件

像下面这样

const ref = useRef()  

 React.Children.map(this.props.children, (element) => {
   React.cloneElement(element, { 
     innerRef: node => ref,
   })
 })

const newComponent=forwardRef（（{children，…otherprops}，ref）{
返回(
{儿童}
)        
})

在forwardRef中获取

ref

为

null

---

可复制示例：-

尝试将

innerRef

更改为

ref

，添加

innerRef

属性，并希望它在

ref

处有效：

const newComponent = forwardRef(({children, ...otherprops}, ref){
    return (
     <div {...otherprops} ref={otherprops.innerRef}>
       {children}
     </div>
    )        
})

---

请提供一些可生产的示例，您也可以将钩子用于不可能编译的类。参考我注意到你更新了问题，你可以检查我的新答案告诉我是否有帮助。对于类组件ref未定义，请在此处检查需要使用其他键的类，如

innerRef

：，编辑答案我的表单中有类组件和功能组件的组合。。通过

RefForm.js

检查沙箱设置ref的唯一方法，我为两者都做了示例，您可以在答案中看到为什么不？详细说明，您可以在函数和类中看到我使用的

props.innerRef

。

import React, { useRef } from 'react';

function RefForm(props) {
  const setRefs = useRef(new Map()).current;
  const { children } = props;
  return (
    <div>
      {React.Children.map(children, child => {
        return React.cloneElement(child, {
//         v not innerRef
          ref: node => {
            console.log('imHere');
            return !node
              ? setRefs.delete(child.key)
              : setRefs.set(child.key, node);
          }
        });
      })}
    </div>
  );
}

export default RefForm;

const Email = React.forwardRef((props, ref) => {
  console.log('email--', ref);
  ref(); // logs "imHere"
  return (
    <div style={{ marginTop: '30px' }}>
      <label>this is email</label>
      <input name="email" ref={props.innerRef} />
    </div>
  );
});

// class component
class Name extends Component {
  render() {
    console.log('name--', this.props.innerRef);

    return (
      <div style={{ marginTop: '30px' }}>
        <label>this is name</label>
        <input name="name" ref={this.props.innerRef} />
      </div>
    );
  }
}

// functional component
const Email = props => {
  console.log('email--', props.innerRef);
  return (
    <div style={{ marginTop: '30px' }}>
      <label>this is email</label>
      <input name="email" ref={props.innerRef} />
    </div>
  );
};

// cloneElement
function RefForm(props) {
  const setRefs = useRef(new Map()).current;
  const { children } = props;
  return (
    <div>
      {React.Children.map(children, child => {
        return React.cloneElement(child, {
          innerRef: node => {
            return !node
              ? setRefs.delete(child.key)
              : setRefs.set(child.key, node);
          }
        });
      })}
    </div>
  );
}