Попытка импортировать ошибку: «Sonnet» не экспортируется из «act-bootstrap » - PullRequest
Новая
       16

Попытка импортировать ошибку: «Sonnet» не экспортируется из «act-bootstrap »

0 голосов
/ 05 мая 2019

Код React-Bootstrap, который я использовал для ListGroups, имеет компонент с именем «Sonnet», который, возможно, не был экспортирован в React-Bootstrap, из-за которого я сталкиваюсь с «Sonnet», а не экспортируется из «act-проблема с загрузкой независимо от моих попыток даже импортировать его вручную или импортировать полный пакет React-bootstrap с помощью «*».Я не нашел ни одной ветки или блога, в котором бы даже перечислялись ошибки "Sonnet" или что-то в этом роде.Ребята, вы должны помочь мне понять!

Мои попытки были: переустановить bootstrap / import {Sonnet} из'act-bootstrap '; / import * как ReactBootstrap из'act-bootstrap';

Ни один, кажется, не работает

Образец для ссылки: 

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;

Ответы [ 2 ]

1 голос
/ 03 июня 2019

Я понимаю «Сонет» как просто заполнитель. Считайте, что это фиктивный класс. Вместо «Сонет» замените его своим собственным классом. Я покажу вам, как я это сделал.

Это оригинальный шаблон из документа response-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' - это мой собственный компонент реакции.

0 голосов
/ 06 мая 2019

Вы должны заменить "<Sonnet />" вашим собственным классом, который вы хотите визуализировать.

...