React 动态组件命名

Question

我是 React 的新手，所以请怜悯。

我也阅读了所有与此相关的话题，尤其是 and 。解决方案无效。

我使用的是选项卡样式界面，用户可以在其中选择一个选项卡并加载相应的内容。 parent 组件存储选项卡的内容状态，将相应的道具传递给内容 child。 child 然后加载正确的内容组件（作为它自己的 child）。

var TabbedContent = React.createClass({

loadMenu: function() {
    var menus=this.props.carDivState.vehicleDetailState;
    for (key in menus) {
        if (menus.hasOwnProperty(key)) {
            if (menus[key]) { 
                var Component='TabbedContent'+key;
                return <Component />;
            }         
        }
    }
},

render: function() {
    return (
        <div className="TabbedContent">
            <div className="contentWrapper">
                {this.loadMenu()}
            </div>
        </div>
    )
}

});

loadMenu 循环遍历道具，直到找到真正的道具。然后它 return 使用该键（例如 "Overview"）并创建一个变量（例如 Component='TabbledContentOverview'）。

但是，我的代码 return 是一个 HTML 标签 <tabbedcontentoverview></tabbedcontentoverview>

问题

如何让 React 成为 return React 组件而不是 HTML 标签？我似乎使用了正确的大写命名约定。我已经阅读了 Facebook 文档。我只是不明白。

Answer 1

您需要引用实际的 class 才能从中创建元素（在 JS 或 JSX 中）。

持有 React classes（即 tabbedChildren）的键映射，然后使用 JS API:

创建此元素

var childComponent = tabbedChildren[key] 
return React.createElement(childComponent)

https://facebook.github.io/react/docs/top-level-api.html

Answer 2

首先，如果您的应用使用 Bootstrap，我建议您使用 react-bootstrap`s tab. If you are not, I would suggest that you at least take a look at the implementation of their TabPane and TabbedArea。

以下是它在您的应用中的外观示例：

const tabbedAreaInstance = (
  <TabbedArea defaultActiveKey={2}>
    <TabPane eventKey={1} tab='Tab 1'>TabPane 1 content</TabPane>
    <TabPane eventKey={2} tab='Tab 2'>TabPane 2 content</TabPane>
    <TabPane eventKey={3} tab='Tab 3' disabled>TabPane 3 content</TabPane>
  </TabbedArea>
);

React.render(tabbedAreaInstance, mountNode);

现在，回到您的问题，如果您想按名称创建组件，只需从 loadMenu:

内部调用 React.createElement

loadMenu: function() {
    var menus=this.props.carDivState.vehicleDetailState;
    for (key in menus) {
        if (menus.hasOwnProperty(key)) {
            if (menus[key]) { 
                return React.createElement('TabbedContent'+key);
            }         
        }
    }
}

Answer 3

https://github.com/vasanthk/react-bits/blob/master/patterns/30.component-switch.md

import HomePage from './HomePage.jsx';
import AboutPage from './AboutPage.jsx';
import UserPage from './UserPage.jsx';
import FourOhFourPage from './FourOhFourPage.jsx';

const PAGES = {
  home: HomePage,
  about: AboutPage,
  user: UserPage
};

const Page = (props) => {
  const Handler = PAGES[props.page] || FourOhFourPage;

  return <Handler {...props} />
};

// The keys of the PAGES object can be used in the prop types to catch dev-time errors.
Page.propTypes = {
  page: PropTypes.oneOf(Object.keys(PAGES)).isRequired
};

React 动态组件命名

React Dynamic Component Naming

javascript

reactjs

react-jsx