如何在 Data 对象中添加自定义组件？

Question

我希望 sectionOne 能够调用另一个组件，但我似乎没有做对。基本上下面是我正在尝试做的一个例子。你能帮忙的话，我会很高兴。谢谢

const element = (
  <div label="go Back">
      <Home />
  </div>
);
export const appTabBarQueues = {
  sectionOne: {element},
  sectionTwo: 'Section Two',
  sectionThree: 'Section Three',
  sectionFour: 'Section Four',
  sectionFive: 'Section Five'
};

//drawer.js

import React from 'react';
import PropTypes from 'prop-types';

export const DrawerSection = props => {
    const {sectionOne} = props;
    return (
        <>
            <div>{sectionOne}</div>
        </>
    );
};
DrawerSection.propTypes = {
    sectionOne: PropTypes.any,
};

Answer 1

Import React from 'react';


const Element = (
      <div label="go Back">
          <Home />
      </div>
    );

    export const appTabBarQueues = {
      sectionOne: <Element />,  // Capitals is important else it will be seen as html element
      sectionTwo: 'Section Two',
      sectionThree: 'Section Three',
      sectionFour: 'Section Four',
      sectionFive: 'Section Five'
    };

  or

 export const appTabBarQueues = {
      sectionOne: React.cloneElement(Element, {someProps: 'something'});
  }

  or if its not imported from elsewhere then,

  export const appTabBarQueues = {
          sectionOne: function Element(props){
            return <div label="go Back">
                      <Home />
                   </div>
          },
  }

根据您的错误消息提出了一些想法，我进行了一些更改，并且可以看到它有效。检查下面的代码沙箱

https://codesandbox.io/s/zen-field-1srdo