用字符串反应原生创建元素

Posted 2023-02-22

【中文标题】用字符串反应原生创建元素

【英文标题】：react native create element with string

【发布时间】：2016-03-04 07:29:16

【问题描述】：

我看到很多人在 React Native 中创建类似于以下的路由映射：

if (route.id === 'Blah') 
    return  (<Blah prop1=this.method prop2=this.other method />);
 else if (route.id === 'OtherView') 
    return (<OtherView prop1=this.method />);

这很快就会变成很多行代码，我想做这样的事情：

return (React.createElement(route.id, propsToPass));

这在 React Native 中不起作用，因为显然“字符串不允许作为 React Native 中的第一个参数，因为这些字符串用于常规 React 中的 html 标签。”

那么如何做到这一点呢？如果我提供一个 ReactClass 作为第一个参数，或者使用 eval(route.id) （但我知道这可能很危险），我就可以正常工作。

如何使用字符串创建 React Native 元素？

【问题讨论】：

这似乎不是一个有效的 JS。

如果你说的是第一个代码 sn-p 中条件句中的 JSX 组件，那是因为它还没有被编译成 JS，这就是 React 的工作原理

【参考方案1】：

您可以设置一个允许的组件命名空间：

var routeComponents = 
  "Blah": Blah,
  "OtherView": OtherView


if(routeComponents[route.id]) 
  return React.createElement(routeComponents[route.id], propsToPass);
 else 
  // Error

【讨论】：

我喜欢 routeComponents[] 的想法，我没有看到 this[route.id] 是如何工作的......你能解释一下吗？

经过思考，this[route.id] 不是你能做的，所以我把它从我的答案中删除了。

好吧，我希望有一种安全的方法来转换字符串，但我把它标记为正确，因为它可能是最好的方法