当前位置: 首页 > 面试题库 >

React / JSX动态组件名称

齐凯康
2023-03-14
问题内容

我正在尝试根据组件的类型动态呈现组件。

例如:

var type = "Example";
var ComponentName = type + "Component";
return <ComponentName />; 
// Returns <examplecomponent />  instead of <ExampleComponent />

那给我一个编译时的错误(使用browserify进行gulp)。我使用数组语法的地方应该是XML。

我可以通过为每个组件创建一个方法来解决此问题:

newExampleComponent() {
    return <ExampleComponent />;
}

newComponent(type) {
    return this["new" + type + "Component"]();
}

但这将意味着为我创建的每个组件提供一种新方法。必须对此问题有一个更优雅的解决方案。

我很乐意提出建议。


问题答案:

<MyComponent />编译为React.createElement(MyComponent,{}),它期望将字符串(HTML标记)或函数(ReactClass)作为第一个参数。

您可以只将组件类存储在名称以大写字母开头的变量中。

var MyComponent = Components[type + "Component"];
return <MyComponent />;

编译为

var MyComponent = Components[type + "Component"];
return React.createElement(MyComponent, {});


 类似资料:
  • 我正在寻找渲染基于字符串的组件。本质上,我希望找到相当于JavaScript动态函数名能力的JSX()。 所以,如果我有一个字符串,比如

  • 我试图根据组件的类型动态地渲染它们。 例如: 我尝试了这里提出的解决方案React/JSX动态组件名称 这在编译时给了我一个错误(使用browserify代替gulp)。它需要XML,而我使用的是数组语法。 我可以通过为每个组件创建一个方法来解决这个问题: 但这意味着我创建的每个组件都有一个新方法。必须有一个更优雅的解决方案来解决这个问题。 我对各种建议持非常开放的态度。

  • 问题内容: 我尝试编写一个React组件。对于html标题标签(h1,h2,h3等),其中标题优先级根据我们在道具中定义的优先级动态变化。 这是我尝试做的。 预期输出: 这是行不通的。有什么可能的方法可以做到这一点? 问题答案: 无法就地执行此操作,只需将其放在变量中(首字母大写):

  • 我试着为html标题标签(h1,h2,h3等)写一个React组件,其中标题优先级根据我们在props中定义的优先级动态变化。 这就是我要做的。

  • 问题内容: 在React JSX中,似乎无法执行以下操作: 我收到一个解析错误:意外令牌{。这不是React可以处理的吗? 我正在设计此组件,以便在内部隐藏的值将包含有效的HTML元素(h1,p等)。有什么办法可以使这项工作吗? 问题答案: 您不应该将组件子弹放在花括号中: 这是一个有效的小提琴:http : //jsfiddle.net/kb3gN/6668/ 此外,您还可以找到JSX编译器,有

  • 问题内容: 我有一个页面,可根据用户输入呈现不同的组件。目前,我已经对每个组件的导入进行了硬编码,如下所示: 但是,我一直都在更改/添加组件。有没有办法使文件仅存储组件的名称和路径,然后将它们动态导入另一个文件中? 问题答案: 我认为对于我想要实现的目标可能有些困惑。我设法解决了我遇到的问题,并在下面显示了我的代码,其中显示了我的解决方法。 单独的文件(ComponentIndex.js): 主文