React动态组件命名

React Dynamic Component Naming

本文关键字：组件 动态 React      更新时间：2023-09-26

我是React新手，所以请原谅我。

我也读了所有关于这个的线程，React/JSX动态组件名称和React/JSX动态组件名称。

我使用一个选项卡风格的界面，用户选择一个选项卡和适当的内容加载。父组件存储选项卡的内容状态，并将相应的道具传递给内容子组件。然后，这个子组件加载正确的内容组件(作为它自己的子组件)。

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循环遍历道具，直到找到一个真正的道具。然后它返回该键(例如"Overview")并创建一个变量(例如Component="tabbledcontenttoverview")。

但是，我的代码返回一个HTML标记<tabbedcontentoverview></tabbedcontentoverview>

我如何让React返回React组件而不是HTML标签?我似乎使用了正确的大写命名约定。我读过Facebook的文档。我就是不明白。

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
};

首先，如果你在应用中使用Bootstrap，我建议你使用react-bootstrap的选项卡。如果你不知道，我建议你至少看看他们的TabPane和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);
            }         
        }
    }
}

您需要有一个对实际类的引用，以便从中创建一个元素(在JS或JSX中)。

持有一个键映射到React类(即tabbedChildren)，并使用JS API创建这个元素:

var childComponent = tabbedChildren[key] 
return React.createElement(childComponent)
https://facebook.github.io/react/docs/top-level-api.html

相关文章：