在 React 数据中传递函数时出错答案

【问题标题】：Error when passing a function in the React data在 React 数据中传递函数时出错
【发布时间】：2021-07-12 18:46:19
【问题描述】：

我正在尝试在 sectionOne 上传递一个函数，然后从另一个组件调用 sectionOne，但出现错误。

Error: Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it.

import React from 'react';
import {Home} from './home';

export const appTabBar = {
    sectionOne: function sectionOne() {
        return (
            <>
                <Home />
            </>
        );
    },
};

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

【问题讨论】：

标签： javascript reactjs rxjs material-ui

【解决方案1】：

您想将 sectionOne 渲染为 React 组件，并将 user-defined components must be capitalized 渲染。您可以在声明它的文件中重命名sectionOne，也可以将其分配给使用它的文件中的变量：

export const DrawerSection = props => {
    const {sectionOne: SectionOne} = props;
    return (
        <>
            <div><SectionOne /></div>
        </>
    );
};

【讨论】：