猿问
下载APP

React / JSX动态组件名称

我试图根据其类型动态呈现组件。


例如:


var type = "Example";

var ComponentName = type + "Component";

return <ComponentName />; 

// Returns <examplecomponent />  instead of <ExampleComponent />

我尝试了这里提出的解决方案React / JSX动态组件名称


这在编译时给了我一个错误(使用browserify for gulp)。它期望我使用数组语法的XML。


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


newExampleComponent() {

    return <ExampleComponent />;

}


newComponent(type) {

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

}

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


我对建议很开放。


忽然笑
浏览 78回答 3
3回答

catspeake

<MyComponent />compiles to React.createElement(MyComponent, {}),它需要一个字符串(HTML标签)或一个函数(ReactClass)作为第一个参数。您可以将组件类存储在名称以大写字母开头的变量中。请参阅HTML标记与React组件。var MyComponent = Components[type + "Component"];return <MyComponent />;编译成var MyComponent = Components[type + "Component"];return React.createElement(MyComponent, {});

手掌心

这里有一个关于如何处理这种情况的官方文档:https://facebook.github.io/react/docs/jsx-in-depth.html#choosing-the-type-at-runtime基本上它说:错误:import React from 'react';import { PhotoStory, VideoStory } from './stories';const components = {&nbsp; &nbsp; photo: PhotoStory,&nbsp; &nbsp; video: VideoStory};function Story(props) {&nbsp; &nbsp; // Wrong! JSX type can't be an expression.&nbsp; &nbsp; return <components[props.storyType] story={props.story} />;}正确:import React from 'react';import { PhotoStory, VideoStory } from './stories';const components = {&nbsp; &nbsp; photo: PhotoStory,&nbsp; &nbsp; video: VideoStory};function Story(props) {&nbsp; &nbsp; // Correct! JSX type can be a capitalized variable.&nbsp; &nbsp; const SpecificStory = components[props.storyType];&nbsp; &nbsp; return <SpecificStory story={props.story} />;}

慕桂英3389331

我想出了一个新的解决方案。请注意我使用的是ES6模块,所以我要求上课。您也可以定义一个新的React类。var components = {&nbsp; &nbsp; example: React.createFactory( require('./ExampleComponent') )};var type = "example";newComponent() {&nbsp; &nbsp; return components[type]({ attribute: "value" });}
打开App,查看更多内容
随时随地看视频慕课网APP
我要回答