React/JSX动态组件名称 [英] React/JSX dynamic component names

问题描述

我正在寻找一种基于字符串的组件.本质上，我希望找到与JavaScript动态函数名称功能( parent ["childMethod"] )等效的JSX.

I am looking to render a component based upon a string. Essentially, I am hoping to find the JSX equivalent to JavaScript's dynamic function name ability (parent["childMethod"]).

那么，如果我有一个字符串，例如< MyComponent/>" ，该如何转换为JSX并进行渲染?

So, if I have a string, such as "<MyComponent />", how can I turn into JSX and render?

推荐答案

JSX只是函数调用的一种不错的语法，因此您需要具有使用组件的实际函数.如果您有一个包含React组件的对象，则可以基于字符串属性渲染一个组件.例如，如果您有一个名为MyComponents的对象(对于JSX必须是大写的)，并且该对象具有React组件，例如 MyComponents.SomeInput = React.CreateClass(...).然后，您可以在JSX中使用< MyComponents.SomeInput/> .

JSX is just a nice syntax for function calls, so you need to have the actual functions to use a component. If you have an object that contains React components then you can render a component based on a string property. For example if you have an object called MyComponents (has to be uppercase for JSX) and that object has React components like MyComponents.SomeInput = React.CreateClass(...). Then you can use <MyComponents.SomeInput /> in your JSX.

这篇关于React/JSX动态组件名称的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！