我在 React 的渲染处理方面遇到了问题。
有一个函数叫做 func1 和 func2,在渲染时调用(eg: return (<func1 />)
)。
例如,我想像下面这样将JSON值中funcName处的字符串呈现为实际的函数名,我该怎么做?
{funcName: "func1"}
如果是上面的值,
我想呈现为“return (<func1 />)
”
虽然我试图解决这个问题,但即使它被eval使用或在变量中渲染它也会导致错误。
为什么现在要做这个处理是用下面的处理来渲染,因为每次加新功能都要加if语句,比较麻烦。
if (funcName.func1! = null) {
return `<func1 />`
} else if (funcName.func2! = null) {
return `<func2 />`
}
每次添加函数的时候也会添加一个if语句 就这样。
知道的请回答
最佳答案
首先,React 组件名称必须以大写字符开头,查看此问题了解更多详情
React - User-Defined JSX Components Not rendering
其次而不是存储
{funcName: "Func1"}
你会存储
{funcName: Func1}
然后渲染成
render() {
const Func1 = obj.funcName;
return <Func1/>
}
或者如果您不能用数据中的组件替换字符串,您可以这样做
render() {
const Func1 = eval(obj.funcName);
return <Func1/>
}
关于javascript - 函数为字符串时如何渲染,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49768418/