Question

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

我的尝试是：重新安装引导程序/ 从'react-bootstrap'导入{Sonnet}; / 从'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;

Answer 1

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

Answer 2

我理解“ Sonnet”只是占位符。将其视为虚拟类。代替“ Sonnet”，将其替换为您自己的课程。我会告诉你我的表现。

这是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组件。

Answer 3

是的，将WHERE item_status IN ('Failed', 'Delivered')替换为您要呈现的类。

<Sonnet />

尝试导入错误：“ Sonnet”未从“ react-bootstrap”导出

3 个答案: