Question

我在使用React的渲染处理时遇到问题。有一个名为func1和func2的函数，在渲染时调用（例如：return (<func1 />)）。

例如，我想从JSON值中funcName的字符串渲染为实际的函数名，如下所示，我该怎么做？

{funcName: "func1"}

如果是上述值，

我想渲染为＆＃34; return (<func1 />)＆＃34;

虽然我试图解决这个问题，但即使它被eval使用或在变量中呈现它也会导致错误。

为什么现在要进行此处理是通过以下处理进行渲染，因为它很麻烦，因为每次添加新函数时都需要添加if语句。

if (funcName.func1! = null) {
  return `<func1 />`
} else if (funcName.func2! = null) {
  return `<func2 />`
}

每次添加功能时都会添加if语句这就是全部。

如果你知道，请回答。

Answer 1

首先，React组件名称必须以大写字母开头，请查看此问题以获取更多详细信息

其次而不是存储

{funcName: "Func1"}

你会存储

{funcName: Func1}

然后渲染为

render() {
    const Func1  = obj.funcName;
    return <Func1/>
}

或者如果你不能用数据中的组件替换字符串，你可以

render() {
    const Func1  = eval(obj.funcName);
    return <Func1/>
}

Answer 2

而不是将其作为元素<func2 />调用函数func2() 但是你的func2必须返回一个有效的反应元素。