javascript - 如何从对象映射渲染 React.js 中的元素

Question

我有一个关于从对象映射渲染组件的问题。我有这样的结构:

const tabs = [
    'tab1': {
        name: 'Tab 1',
        renderComponent: () => <Tab1Component />
    },
    'tab2': {
        name: 'Tab 2',
        renderComponent: () => <Tab2Component />
    }
];

我想访问 renderComponent 属性并渲染子组件。 尝试使用函数调用 React.createElement() 不起作用。

const MyComponent = ({tabs}) => {
    const activeTab = 'tab1';
    return (
        <>
        // How to render it?
        // function invocation?
        // createElement??
            tabs[activeTab].renderComponent();
        </>
    );
};

Answer 1

你的数组声明是错误的。您应该使用对象或包含对象的数组。试试这个 block 。

const tabs = {
  tab1: {
    name: "Tab 1",
    renderComponent: () => <Tab1Component />
  },
  tab2: {
    name: "Tab 2",
    renderComponent: () => <Tab2Component />
  }
};

同时用 {} 包围你的 js 代码；

const MyComponent= () => {
  const activeTab = "tab1";
  return <>{tabs[activeTab].renderComponent()}</>;
};
export default MyComponent;