尝试导入错误：未从“react-bootstrap”导出“十四行诗”答案

【问题标题】：Attempted import error: 'Sonnet' is not exported from 'react-bootstrap'尝试导入错误：未从“react-bootstrap”导出“十四行诗”
【发布时间】：2023-03-06 13:19:02
【问题描述】：

我用于 ListGroups 的 React-Bootstrap 代码有一个名为“Sonnet”的组件，它可能尚未在 React-Bootstrap 中导出，因此我面临的“十四行诗”没有从“react-”导出无论我尝试手动导入它还是使用“*”导入完整的 React-bootstrap 包，都会出现 bootstrap 问题。我还没有找到一个线程或博客，它甚至列出了“十四行诗”错误或任何与此相关的内容。需要你们帮我理解！

我的尝试是：重新安装引导程序/ 从'react-bootstrap'导入{十四行诗}；/ 从'react-bootstrap'导入*作为ReactBootstrap；

似乎没有一个工作

参考样本：

import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
//import './Assets/css/default.min.css';
//import * as ReactBootstrap from 'react-bootstrap';
import {Card,ListGroup,Tab,Row,Col,Sonnet} from 'react-bootstrap';
class Data extends React.Component {
  render(){
    return (
        <data>
            <div className="data">
            <Tab.Container id="list-group-tabs-example" defaultActiveKey="#link1">
                <Row>
                    <Col sm={4}>
                    <ListGroup>
                        <ListGroup.Item> Online Devices
                        </ListGroup.Item>
                        <ListGroup.Item action href="#link1">
                        Soil Sensor
                        </ListGroup.Item>
                        <ListGroup.Item action href="#link2">
                        Level Sensor
                        </ListGroup.Item>
                    </ListGroup>
                    </Col>
                    <Col sm={8}>
                    <Tab.Content>
                        <Tab.Pane eventKey="#link1">
                            <Sonnet/>
                         Soil sensor
                        </Tab.Pane>
                        <Tab.Pane eventKey="#link2">
                        <Sonnet/>
                         Level Sensor
                        </Tab.Pane>
                    </Tab.Content>
                    </Col>

                </Row>

                </Tab.Container>
            </div>
        </data>
        );
}
}
export default Data;

【问题讨论】：

标签： reactjs react-bootstrap

【解决方案1】：

我将“十四行诗”理解为只是占位符。将其视为一个虚拟类。而不是“十四行诗”，用你自己的班级代替它。我会告诉你我是怎么做的。

这是来自 react-bootstrap 文档的原始模板。

    <Tab eventKey="home" title="Home">
      <Sonnet />
    </Tab>
    <Tab eventKey="profile" title="Profile">
      <Sonnet />
    </Tab>
    <Tab eventKey="contact" title="Contact" disabled>
      <Sonnet />
    </Tab>

如果我把它应用到我自己的项目中......

    <Tab eventKey="home" title="Home">
      <SignUp />
      {/* <Sonnet /> */}
    </Tab>
    <Tab eventKey="profile" title="Profile">
      <SignIn />
      {/* <Sonnet /> */}
    </Tab>
    <Tab eventKey="contact" title="Contact" disabled>
      {/* <Sonnet /> */}
    </Tab>
  </Tabs>

'SignUp' 和 'SignIn' 是我自己的 react 组件。

【讨论】：

【解决方案2】：

您必须将 "<Sonnet />" 替换为您自己想要渲染的类。

【讨论】：

【解决方案3】：

是的，将 <Sonnet /> 替换为您自己想要渲染的类。

<Tabs defaultActiveKey="home" id="uncontrolled-tab-example">
  <Tab eventKey="home" title="Home">
    <TabContent />
    {/* <Sonnet /> */}
    </Tab>
  <Tab eventKey="profile" title="Profile">
     <TabContent />
   {/* <Sonnet /> */}
  </Tab>
  <Tab eventKey="contact" title="Contact" disabled>
      <TabContent />
   {/* <Sonnet /> */}
  </Tab>
</Tabs>

【讨论】：