react 如何处理无状态组件的ref

Question

问题描述

最近在vue迁移到react中发现react没有较好的方法处理动态自定义标签的插入，而vue我是可以通过自带component标签实现

问题出现的环境背景及自己尝试过哪些方法

网上看到一个类似的例子，通过tag标签可以达到效果

const Tag = this.props.long ? "textarea" : "input";

    const input = <Tag 
              onChange={this.props.onChange}
              className="make-this-pretty"
              id="important-input"
          />;

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）

render(){
    let list = [];
    if (this.state.DataList.length>0){

        this.state.DataList.forEach((items,i)=>{
            // const templateName = items.layout.replace(/_/g,'');
            // console.log(templateName);
            try {
                const Tag  = this.renderComponents(items.layout); 
                list.push(<Tag key={i} source={items} ref="childo"  />);
                this.state.componentsId.push(items.specialId); // 将组件ID依次放入容器供键值响应处理
            } catch (error) {
                console.log(items.layout+"组件不存在");    
            }
      
        })
    }
    console.log(list);
    return(
        <div className="mainbox">
            {list}
        </div>
    )
}

你期待的结果是什么？实际看到的错误信息又是什么？

结果编译完成后，控制台打印：Warning: Stateless function components cannot be given refs. Attempts to access this ref will fail

大概的意思就是无状态的组件是不能获取refs的，请问下该怎么解决。

Answer 1

不是无状态的组件 是无状态的function组件 你的ref指到了一个function function组件没实例的

Answer 2

无状态组件就只定义了render生命周期，你写了ref时没地方用的，删掉ref就行了