首页 > 解决方案 > 如何从包含类名的字符串中获取 React 组件类?

问题描述

注意:这个问题不是React / JSX Dynamic Component Name的重复问题。我已经知道在接受的答案中使用的解决方案,如果您在下面阅读我的问题,我已经在使用类似的解决方案(使用映射将字符串转换为组件类)。我的问题是我是否可以避免维护这样的映射并将字符串直接转换为组件类。

这是我的代码index.js

import React from 'react'
import ReactDOM from 'react-dom'

class Foo extends React.Component {
  render() {
    return <h1>Foo</h1>
  }
}

class Bar extends React.Component {
  render() {
    return <h1>Bar</h1>
  }
}

function renderComponent(Component) {
  ReactDOM.render(<Component />, document.getElementById('root'))
}

function getComponent(name) {
  let map = {
    'Foo': Foo,
    'Bar': Bar,
  }
  return map[name]
}

renderComponent(getComponent('Foo'))

getComponent()函数将一个 React 组件类名作为字符串输入,并返回对应的类?

目前,我有一个对象文字将每个类名映射到一个类?每次我添加一个新类时,我都必须更新这个对象字面量。有没有办法可以避免维护这个对象文字?

有没有一种方法getComponent()可以将类名作为字符串输入直接转换为类?

标签: javascriptreactjsclassecmascript-6

解决方案


推荐阅读