Javascript ReactJs：如何在无状态组件中使用refs

这可能是重复的，但是在与这个标题相关的所有线程（我搜索过的）中，没有一个有解决方案，而没有解释为什么不能使用它

我必须使用一个组件，它包含一个带有ref的输入文本元素

let FormGroup = ({className, ref, value, maxLength}) => {
    return <div className="form-group">
        <div className="form-group-inner">
            <input ref={ref} type="text" class={className} value={value} maxlength={maxLength}/>
            <i className="form-group-helper"></i>
        </div>
    </div>
}

export default FormGroup

let FormGroup=（{className，ref，value，maxLength}）=>{
返回
}
导出默认表单组

当我重复使用它时

<FormGroup
    className={'form-control form-control-sm'}
    ref={'maxUserElement'}
    value={'SMM-00012'}
    maxLength={12}
    onChange={this.handleFormControl.bind(this)}
/>

我不断收到以下控制台错误：

无状态函数组件不能有引用。

---

请帮助我解决此问题。

您只需更改道具的名称即可完成此操作。问题是您在

FormGroup

上分配

ref

，而不是实际传递它

<FormGroup
    className={'form-control form-control-sm'}
    inputRef={'maxUserElement'}
    value={'SMM-00012'}
    maxLength={12}
    onChange={this.handleFormControl.bind(this)}
/>

...

<input ref={inputRef} type="text" class={className} value={value} maxlength={maxLength}/>

...

尽管不清楚为什么您真的要这样做，除非您稍后手动查找DOMnode，否则您的

FormGroup

组件仍然无法直接访问底层的

输入

此外，从提出的关于这一点的问题可以很好地解释根本问题：

ref本质上是一个支持实例，只能返回
来自有状态组件或DOM，但不是无状态组件，
因为没有为无状态组件创建实例

这似乎已经在React回购协议中详细讨论过：