3
votes

Erreur d'importation tentée: 'Sonnet' n'est pas exporté depuis 'react-bootstrap'

Le code React-Bootstrap que j'ai utilisé pour ListGroups a un composant nommé "Sonnet" qui n'a peut-être pas été exporté dans le React-Bootstrap, en raison duquel je suis confronté au 'Sonnet' n'est pas exporté de 'react- problème de bootstrap 'indépendamment de mes tentatives pour même l'importer manuellement ou importer le package complet React-bootstrap avec "*". Je n'ai pas trouvé un seul fil ou un blog qui répertorie même les erreurs "Sonnet" ou quoi que ce soit d'ailleurs. Besoin de vous les gars pour m'aider à comprendre!

Mes tentatives ont été: réinstallation de bootstrap / import {Sonnet} de 'react-bootstrap'; / import * as ReactBootstrap de 'react-bootstrap';

Aucun ne semble fonctionner

L'exemple pour ref:

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;


0 commentaires

3 Réponses :


1
votes

Vous devez remplacer "" par votre propre classe, que vous souhaitez rendre.


0 commentaires

7
votes

Je comprends «Sonnet» comme un simple espace réservé. Considérez-le comme une classe factice. Au lieu de «Sonnet», remplacez-le par votre propre classe. Je vais vous montrer comment j'ai fait.

Ceci est un modèle original du document react-bootstrap.

    <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>

Si j'applique cela dans mon propre projet ... p >

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

'SignUp' et 'SignIn' est mon propre composant de réaction.


0 commentaires

-1
votes

Ouais, remplacez par votre propre classe, que vous souhaitez afficher.

<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>


0 commentaires