Question

我制作了一个单独的组件，可以将其视为父组件中调用的子组件。通过正确导入调用组件时，我遇到了这个问题

我试图创建一个单独的方法来调用该组件，然后调用该方法，该方法将带来该组件的功能，但没有运气。

下面是名为GlobalHeaderHelpLabel.js的子组件：

import React from 'react';
import {Popover}  from '@salesforce/design-system-react';
import {GlobalHeaderHelp}  from '@salesforce/design-system-react';

const ipsum ='Lorem';
class GlobalHeaderHelpLabel extends React.Component
{
    render(){
        return(
            <GlobalHeaderHelp
                        popover={
                            <Popover
                                ariaLabelledby="help-heading"
                                body={
                                    <div>
                                        <h2 className="slds-text-heading_small" id="help-heading">
                                            Help and Training
                                        </h2>
                                        {ipsum}
                                    </div>
                                }
                                id="header-help-popover-id"
                            />
                        }
                    />

        );
    }

}export default GlobalHeaderHelpLabel;

下面是我要对其调用此父级并面对名为GlobalHeaderLabel.js的错误的父组件：

import React from 'react';
import GlobalHeaderHelpLabel from './GlobalHeaderHelpLabel';
class GlobalHeaderLabel extends React.Component
{


    render(){
        return(
<div>
                  <GlobalHeaderHelpLabel/>
<div/>
);}
    }

以下是错误：

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. 
You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Answer 1

默认将导出Popover组件。更改：

import {Popover} from '@salesforce/design-system-react';

至：

import Popover from '@salesforce/design-system-react';

元素类型无效：预期为字符串或类/函数（对于复合组件），但得到：未定义

1 个答案: