reactjs - 在 React 中使用语义 UI 时未捕获的错误

问题描述

我正在尝试在反应中使用语义 UI，但我有一个问题：

在 App.jsx 中：

import BlogDashboard from '../../features/blog/BlogDashboard/BlogDashboard';
import BlogDetailedPage from '../../features/blog/BlogDetail/BlogDetailedPage';
class App extends Component {
render() {
    return (
        <Fragment>
            <Route exact path='/' component={HomePage}/>
            <Route
            path='/(.+)'
            render={() => (
            <Fragment>
                <NavBar />
                <Container className="main">
                    <Switch>
                        <Route exact path='/blogs' component={BlogDashboard} />
                        <Route path='/blogs/:id' component={BlogDetailedPage} />
                    </Switch>
                </Container>
            </Fragment>
            )} 
        />
        </Fragment>
    );
}
}
export default App;

在 BlogDetailsPage 中：

import React from 'react'
import { Grid } from 'semantic-ui-react'
import BlogDetailedHeader from './BlogDetailedHeader'

const BlogDetailedPage = () => {
return (

    <Grid>
        <Grid.Column width={10}>
            <BlogDetailedHeader />
        </Grid.Column>
    </Grid>
 )
}
export default BlogDetailedPage;

在 BlogDetailedHeader 中：

import React from 'react';
import { Segment, Image, Item, Header, Button } from 'semantic-ui-react';
const BlogDetailedHeader = () => {

return (    
    <Segment.Group>
        <Segment basic attached="top" style={{padding: '0'}}>
            <Image src="/assets/categoryImages/HoiAn.jpg" fluid  />
            <Segment basic style={blogImageTextStyle}>
                <Item.group>
                   <Item>
                       <Item.Content>
                            <Header side="huge" content="Blog title" style={{color: 'white'}} />
                            <p>Date</p>
                            <p>Posted by <strong>posted by</strong></p>
                       </Item.Content>
                   </Item>
                </Item.group>
            </Segment>
        </Segment>

        <Segment attached="bottom">
            <Button>Cancel</Button>
            <Button color='teal' >like</Button>
            <Button color='orange' floated="right">Edit</Button>
        </Segment>

    </Segment.Group>
)
}

export default BlogDetailedHeader;

现在，如果我将 BlogDetailedHeader 组件返回中的代码替换为类似 div 标记<div>Hello</div>或任何 HTML 标记，它将正常工作（这意味着 BlogDetailedPage 可以显示来自 BlogDetailedHeader 的内容）但是当我在代码中使用语义 UI 组件时， React 给我一个错误：

Error: 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.

请帮我解决这个问题。

标签： reactjs

reactjs - 在 React 中使用语义 UI 时未捕获的错误

问题描述

解决方案

推荐阅读