使用字符串创建React Native元素

Question

我看到很多人在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元素呢？

- Ben Taliadoros

---

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

如果你在谈论第一个代码片段中条件语句中的JSX组件，那是因为它还没有被编译成JS，这就是React的工作方式。 - Ben Taliadoros

Answer 1

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

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

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

- Marc Greenstock

---

我喜欢routeComponents[]的想法，但我不明白这个[route.id]是如何工作的...你能再解释一下吗？ - Ben Taliadoros

经过考虑，这个 [route.id] 是你无法做到的，所以我已经从我的回答中将其删除了。 - Marc Greenstock

好的，我希望有一种安全的方法来转换字符串，但既然这可能是最好的方法，我会将其标记为正确的。 - Ben Taliadoros