Question

我是React的新手，几天前开始探索bootstrap。但是，每当我尝试从react-bootstrap导入某些内容时，都会引发错误。

我已经尝试过重新安装react-bootstrap。但这并不能解决问题。这些是我的进口商品：

import React, { Component } from 'react';
import {Button} from 'react-bootstrap/Button'; <-- culprit
import logo from './logo.svg';
import './App.css';
import Chart from './components/Chart';
import axios from 'axios';
import {Typeahead} from 'react-bootstrap-typeahead'; <-- works fine

错误发生在带有React-bootstrap的ThemeProvider.js中。

TypeError：对象不支持属性或方法'createContext'

  15 | 
  16 | var _react = _interopRequireWildcard(require("react"));
  17 | 
> 18 | var ThemeContext = _react.default.createContext({});
  19 | 
  20 | var Consumer = ThemeContext.Consumer,
  21 |     Provider = ThemeContext.Provider;

Answer 1

尝试一下：

parquet

或：

    private string [,] ParseSegment(string ms)
    {
        int i = 0;
        string[] segmentFields = ms.Split('|');//fields for this segment
        int arrayLength = segmentFields.Length;
        string[,] fieldAndIndex = new string[arrayLength,1];

        foreach (string field in segmentFields)
        {
            fieldAndIndex [i,i] = {{ i,field} };//I'm not sure what to do here!!!!
        }

        return fieldAndIndex;
    }

，您需要安装bootstrap css并将其导入：

1。

import {Button} from 'react-bootstrap';

2。

 import Button from 'react-bootstrap/Button'

Answer 2

当您导入用{}包裹起来的内容时，它表示导出的内容带有明确的名称标识符。

在这种情况下：import {Button} from 'react-bootstrap/Button'表示该文件已明确命名其导出文件之一Button。但这不太可能，因为按照惯例，这些库通常从/Button这样的特定文件导入时，它们几乎总是使用默认导出。

解决方案是通过执行以下操作简单地获取默认导出：

import Button from 'react-bootstrap/Button'

使用默认导出，您可以将导入命名为任意名称，甚至如下所示：

import MyButton from 'react-bootstrap/Button'

或者，您可以仅从head文件夹导入。在这种情况下，您实际上必须使用{}来获取命名的项目。

import {Button, Input, Form} from 'react-bootstrap';

Answer 3

当您导入 Button 或任何用花括号括起来的组件时，您不需要在反斜杠后包含组件名称。

简单地说

从'react-bootstrap/'导入{Button}；

当我们导入一个没有用 {} 包裹的组件时，我们需要像这样给出组件名称。

从'react-bootstrap/Button'导入按钮；

无法从react-bootstrap导入组件

3 个答案: