problem description
recently, in the migration from vue to react, I found that react does not have a better way to handle the insertion of dynamic custom tags, while vue I can implement it by bringing my own component tag
the environmental background of the problems and what methods you have tried
see a similar example on the Internet, which can be achieved through the tag tag
const Tag = this.props.long ? "textarea" : "input";
const input = <Tag
onChange={this.props.onChange}
className="make-this-pretty"
id="important-input"
/>;
related codes
/ / Please paste the code text below (do not replace the code with pictures)
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>
)
}
what result do you expect? What is the error message actually seen?
after the compilation of the result is complete, the console prints: Warning: Stateless function components cannot be given refs. Attempts to access this ref will fail
roughly means that stateless components cannot get refs. How to solve this problem?