javascript - 函数为字符串时如何渲染

Question

我在 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语句就这样。

知道的请回答

Answer 1

首先，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/>
}