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"]();
}

但这意味着我创建的每个组件都有一个新方法。这个问题一定有更优雅的解决办法。

我很愿意接受建议。

编辑: 正如gmfvpereira最近指出的，有一个官方文档条目: https://reactjs.org/docs/jsx-in-depth.html#choosing-the-type-at-runtime

当前回答

在所有的组件映射选项中，我还没有找到使用ES6短语法定义映射的最简单的方法:

import React from 'react'
import { PhotoStory, VideoStory } from './stories'

const components = {
    PhotoStory,
    VideoStory,
}

function Story(props) {
    //given that props.story contains 'PhotoStory' or 'VideoStory'
    const SpecificStory = components[props.story]
    return <SpecificStory/>
}

2020-05-01 07:33:31

其他回答

假设你能够像这样从组件中导出*…

// src/components/index.js

export * from './Home'
export * from './Settings'
export * from './SiteList'

然后你可以重新导入*到一个新的comps对象中，然后它可以用来访问你的模块。

// src/components/DynamicLoader.js

import React from 'react'
import * as comps from 'components'

export default function ({component, defaultProps}) {
  const DynamicComponent = comps[component]

  return <DynamicComponent {...defaultProps} />
}

只需传入一个字符串值，该值标识您想要绘制的组件，以及需要绘制组件的位置。

<DynamicLoader component='Home' defaultProps={someProps} />

2022-01-03 21:29:46

对于包装器组件，一个简单的解决方案就是使用React。直接createElement(使用ES6)。

import RaisedButton from 'mui/RaisedButton'
import FlatButton from 'mui/FlatButton'
import IconButton from 'mui/IconButton'

class Button extends React.Component {
  render() {
    const { type, ...props } = this.props

    let button = null
    switch (type) {
      case 'flat': button = FlatButton
      break
      case 'icon': button = IconButton
      break
      default: button = RaisedButton
      break
    }

    return (
      React.createElement(button, { ...props, disableTouchRipple: true, disableFocusRipple: true })
    )
  }
}

2016-08-19 18:27:04

我使用了一点不同的方法，因为我们总是知道我们的实际组件，所以我认为应用开关情况。另外，在我的案例中，组件总数在7-8左右。

getSubComponent(name) {
    let customProps = {
       "prop1" :"",
       "prop2":"",
       "prop3":"",
       "prop4":""
    }

    switch (name) {
      case "Component1": return <Component1 {...this.props} {...customProps} />
      case "Component2": return <Component2 {...this.props} {...customProps} />
      case "component3": return <component3 {...this.props} {...customProps} />

    }
  }

2016-05-14 10:16:35

我想出了一个新的解决办法。请注意，我使用ES6模块，所以我需要类。你也可以定义一个新的React类。

var components = {
    example: React.createFactory( require('./ExampleComponent') )
};

var type = "example";

newComponent() {
    return components[type]({ attribute: "value" });
}

2015-04-26 09:58:27

<MyComponent />编译为React。createElement(MyComponent，{})，它需要一个字符串(HTML标签)或一个函数(ReactClass)作为第一个参数。

您可以将组件类存储在一个名称以大写字母开头的变量中。参见HTML标签vs React组件。

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

编译,

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

2015-04-26 10:07:10

React / JSX动态组件名称

推荐文章

最新文章

标签