Добавление Bootstrap в ReactJS - PullRequest
Новая
       9

Добавление Bootstrap в ReactJS

0 голосов
/ 22 октября 2018

Я новичок в React и пытаюсь добавить Bootstrap в свой проект.Я следовал приведенному ниже руководству при создании моего первого приложения.

https://docs.microsoft.com/en-us/visualstudio/javascript/tutorial-nodejs-with-react-and-jsx?view=vs-2017

Затем я попытался добавить Bootstrap с помощью npm install с официального сайта и добавить строку импорта кода в файл app.tsx: 

var React = require('react');
var ReactDOM = require('react-dom');
import { Button } from 'react-bootstrap';

Я также добавил в свой пакет «response-bootstrap»: «^ 0.32.4».Однако, когда я пытаюсь добавить кнопку в мой файл app.tsx, я получаю ошибки, т.е. 

<div>  <Button bsStyle="primary">Primary</Button> </div>

Ошибки: build: JSX-выражение должно иметь один родительский элемент.TS17004 (TS) Невозможно использовать JSX, если не указан флаг '--jsx'.Сборка: левая сторона оператора запятой не используется и не имеет побочных эффектов.

Я точно не знаю, почему это происходит.

Ответы [ 3 ]

0 голосов
/ 22 октября 2018 
render() {
        return (
            <div>
              <h1>Welcome to React!!</h1>
              <Button bsStyle="primary">Primary</Button>
            </div>
        );
    }

Попробуйте это.

0 голосов
/ 22 октября 2018

Выражение JSX должно иметь один родительский элемент.TS17004 (TS).

Вышеуказанная ошибка возникает при наличии нескольких элементов JSX внутри return().Чтобы избавиться от этого, вы можете обернуть все элементы внутри тега <div>. 

var React = require('react');
var ReactDOM = require('react-dom');
import { Button } from 'react-bootstrap';

class Hello extends React.Component {
    render() {
        return (
          <div>
            <Button bsStyle="primary">Primary</Button>
            <h1>Welcome to React!!</h1>
         </div>
        );
    }
}

ReactDOM.render(<Hello />, document.getElementById('root'));

В качестве альтернативы, из Реакта 16 есть нечто, называемое <React.Fragments>.Это лучший подход, так как вам не нужно добавлять дополнительный dom-узел. 

var React = require('react');
var ReactDOM = require('react-dom');
import { Button } from 'react-bootstrap';

class Hello extends React.Component {
    render() {
        return (
          <React.Fragment>
            <Button bsStyle="primary">Primary</Button>
            <h1>Welcome to React!!</h1>
         </React.Fragment>
        );
    }
}

ReactDOM.render(<Hello />, document.getElementById('root'));

И еще один момент, который я хотел бы упомянуть: вам не нужно использовать синтаксис require узла, выиспользуйте import ES6.

0 голосов
/ 22 октября 2018

Убедитесь, что ваш <Button> обернут div, ваши элементы должны быть обернуты в родительский элемент.

Начиная с React 16.2, вы также можете использовать Фрагменты

РЕДАКТИРОВАТЬ:

Также сделать ваш tsconfig.json включает в себя "jsx": "react"; 

{
  "compilerOptions": {
    "noImplicitAny": false,
    "module": "commonjs",
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "target": "es5",
    "jsx": "react"
  },
  "exclude": [
    "node_modules"
  ],
  "files": [
    "app.tsx"
  ]
}
...