response-bootstrap не получает тег формы после импорта компонента - PullRequest
Новая
       5

response-bootstrap не получает тег формы после импорта компонента

0 голосов
/ 27 апреля 2018

Я очень новичок, чтобы реагировать. При запуске я пытаюсь создать форму для входа в систему, используя response-bootstrap, но когда я запускаю код, в консоли отображаются ошибки, как показано ниже

index.js: 40724 Uncaught TypeError: Невозможно прочитать свойство 'Form' из не определено в App.render (index.js: 40724) at index.js: 36958 at measureLifeCyclePerf (index.js: 36238) at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (index.js: 36957) в ReactCompositeComponentWrapper._renderValidatedComponent (index.js: 36984) в ReactCompositeComponentWrapper.performInitialMount (index.js: 36524) в ReactCompositeComponentWrapper.mountComponent (index.js: 36420) в Object.mountComponent (index.js: 5996) в ReactCompositeComponentWrapper.performInitialMount (index.js: 36533) в ReactCompositeComponentWrapper.mountComponent (index.js: 36420)

Ниже мой код Файл app.js - этот файл содержит мою форму входа, 

  import React from 'react';
    import Bootstrap from "react-bootstrap";
     export class App extends React.Component{
        render(){
             return (
                     <Bootstrap.Form horizontal>
                  <Bootstrap.FormGroup controlId="formHorizontalEmail">
                    <Bootstrap.Col componentClass={LoginForm.ControlLabel} sm={2}>
                      Email
                    </Bootstrap.Col>
                    <Bootstrap.Col sm={10}>
                      <Bootstrap.FormControl type="email" placeholder="Email" />
                    </Bootstrap.Col>
                  </Bootstrap.FormGroup>

                  <Bootstrap.FormGroup controlId="formHorizontalPassword">
                    <Bootstrap.Col componentClass={LoginForm.ControlLabel} sm={2}>
                      Password
                    </Bootstrap.Col>
                    <Bootstrap.Col sm={10}>
                      <Bootstrap.FormControl type="password" placeholder="Password" />
                    </Bootstrap.Col>
                  </Bootstrap.FormGroup>

                  <Bootstrap.FormGroup>
                    <Bootstrap.Col  smOffset={2} sm={10}>
                      <Bootstrap.Checkbox>Remember me</Bootstrap.Checkbox>
                    </Bootstrap.Col>
                  </Bootstrap.FormGroup>

                  <Bootstrap.FormGroup>
                    <Bootstrap.Col smOffset={2} sm={10}>
                      <Bootstrap.Button type="submit">Sign in</Bootstrap.Button>
                    </Bootstrap.Col>
                  </Bootstrap.FormGroup>
                </Bootstrap.Form>
         );
        }
    }

Файл main.js - этот файл является точкой входа моего приложения, 

import React from 'react';
    import  ReactDOM from 'react-dom';
    import {App} from './app.js';

    ReactDOM.render(<App />,document.getElementById('app'));

Файл Index.html - этот файл содержит html-страницу 

   <!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<meta charset="utf-8">
    <title>React First App</title>
</head>
<body>

<div id="app">
</div>

<script  src="index.js"></script>

</body>
</html>

Файл Package.json 

    {
  "name": "demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "mode": "development",
  "scripts": {
    "start": "webpack-dev-server --hot",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "babel": "^6.23.0",
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "react": "^15.6.1",
    "react-bootstrap": "^0.32.1",
    "react-dom": "^15.6.1",
    "webpack": "^3.5.5",
    "webpack-dev-server": "^2.7.1"
  },
  "devDependencies": {
    "css-loader": "^0.28.11"
  }
}

Файл Webpack.config.js 

var config = {

   entry: './main.js', // entry point
   output: {
         filename: 'index.js', // place where bundled app will be served
      },
   devServer: {
         inline: true, // autorefresh
         port: 8080 // development port server
      },
   module: {
         loaders: [
                        {
                           test: /\.jsx?$/, // search for js files 
                           exclude: /node_modules/,
                           loader: 'babel-loader',
                    query: {
                           presets: ['es2015', 'react'] // use es2015 and react
                        }
                     },
                {
                test: /\.css?$/, // search for css files 
                loader:'css-loader' 
                }
          ]


   }
}
module.exports = config;

Я пытался использовать прямую форму, но она не работает. если я использую обычный тег HTML, то это работает. Я думал, что это была проблема экспорта компонента, но его экспортировали в main.js. Обратите внимание: если я удаляю экспорт из класса и добавляю export default App в конец app.js, то код не экспортирует компонент. Это странно, но это происходит. работает только с export class component name

Я очень смущен, почему он не получает форму и другие теги в начальной загрузке После прохождения ошибки я также определил, что реакция превращает bootstrap.Form в _reactbootstrap2.Default.Form. и значение по умолчанию отображается как неопределенное. во время отладки. но _reactbootstrap2 содержит форму как элемент. Понятия не имею, что происходит.

Я установил реактив-бутстрап, используя команду ниже npm install --save react-bootstrap в моем пути к каталогу проекта

1 Ответ

0 голосов
/ 27 апреля 2018

react-bootstrap не имеет экспорта по умолчанию.

Вместо import Bootstrap from "react-bootstrap" попробуйте: 

import { Form, Col, FormGroup, Checkbox } from 'react-bootstrap' // add more if you are using more components from bootstrap

Тогда просто используйте <Form> вместо <Bootstrap.Form>.

...