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;
3 Réponses :
Vous devez remplacer " par votre propre classe, que vous souhaitez rendre.
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.
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>