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>