Question

按照https://reactjs.org/docs/add-react-to-a-website.html的步骤将React包含在我的平台中。在后面的示例中，provider尝试为React实现一个组件，该组件应该是Bootstrap Carousel（https://react-bootstrap.github.io/components/carousel/），以包括搜索指向该包的cdn并找到了https://cdnjs.com/libraries/react-bootstrap包含在React脚本下方的

<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/0.32.4/react-bootstrap.js" crossorigin></script>

但是出现错误

未捕获的ReferenceError：未定义轮播

  _createClass(BrandsCarousel, [{
    key: 'render',
    value: function render() {
      if (this.state.brands.length != 0) {
        return React.createElement(
          Carousel,
          null,
          this.renderBrandsList()
        );
      }

      // Display a "Like" <button>
      return 'processing (appears a loading icon)';
    }
  }

因此，不仅需要包含https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/0.32.4/react-bootstrap.js还是我错过了某些步骤吗？

<div id="Reactbrands_container" class="winsig_secondary_info_bar paralax" style="background: url(/images/paralax_images/paralax_bg_3.jpg)" paralaxpos="50%">
</div>

--------- JSX --------------

    'use strict';

    class BrandsCarousel extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
           brands: []
        };
      }

      render() {
        if (this.state.brands.length != 0) {
          return (
              <Carousel>
                {this.renderBrandsList()}
              </Carousel>
          );
        }

        // Display a "Like" <button>
        return (
          'processing (appears a loading icon)'
        );
      }

      renderBrandsList(){
          var brands = [];
          this.state.brands.forEach(function(brand){
            brands.push(
              <Carousel.Item>
                <img width={110} height={110} alt="110x110" src={brand.BrandImage} />
                <Carousel.Caption>
                  <h3>{brand.BrandName}</h3>
                  <p>{brand.BrandDescription}</p>
                </Carousel.Caption>
              </Carousel.Item>
            );
          });
          return brands;
      }

      componentDidMount(){
        var brandsList = [];
        $.ajax({
          url: "theUrlRequest",
          type: "post",
          data: 'UserID=' + userid +'&EntityID='+ 0 +'&orderBy=0' ,
          success: function(response, textStatus, jqXHR) {
              response.data.forEach(function(brand){
                brandsList.push(
                  {
                    BrandDescription: brand.BrandDescription,
                    BrandID: brand.BrandID,
                    BrandImage: brand.BrandImage,
                    BrandImage2: brand.BrandImage2,
                    BrandLink: brand.BrandLink,
                    BrandName: brand.BrandName,
                    BrandReference: brand.BrandReference,
                    Position: brand.Position,
                    firstActive: brand.firstActive,
                    sortOrder: brand.sortOrder
                  }
                );
              });
              this.setState({brands: brandsList});
          }.bind(this),
          error: function(jqXHR, textStatus, errorThrown){
            console.log('an error ocurrered');
          }
        });
      }


    }

const domContainer = document.querySelector('#Reactbrands_container');
ReactDOM.render(<BrandsCarousel />, domContainer);

--------------------已编译或已转译的JS ---------------------- ----------

'use strict';

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var BrandsCarousel = function (_React$Component) {
  _inherits(BrandsCarousel, _React$Component);

  function BrandsCarousel(props) {
    _classCallCheck(this, BrandsCarousel);

    var _this = _possibleConstructorReturn(this, (BrandsCarousel.__proto__ || Object.getPrototypeOf(BrandsCarousel)).call(this, props));

    _this.state = {
      brands: []
    };
    return _this;
  }

  _createClass(BrandsCarousel, [{
    key: 'render',
    value: function render() {
      if (this.state.brands.length != 0) {
        return React.createElement(
          Carousel,
          null,
          this.renderBrandsList()
        );
      }

      // Display a "Like" <button>
      return 'processing (appears a loading icon)';
    }
  }, {
    key: 'renderBrandsList',
    value: function renderBrandsList() {
      var brands = [];
      this.state.brands.forEach(function (brand) {
        brands.push(React.createElement(
          Carousel.Item,
          null,
          React.createElement('img', { width: 110, height: 110, alt: '110x110', src: brand.BrandImage }),
          React.createElement(
            Carousel.Caption,
            null,
            React.createElement(
              'h3',
              null,
              brand.BrandName
            ),
            React.createElement(
              'p',
              null,
              brand.BrandDescription
            )
          )
        ));
      });
      return brands;
    }
  }, {
    key: 'componentDidMount',
    value: function componentDidMount() {
      var brandsList = [];
      $.ajax({
        url: "theUrlRequest",
        type: "post",
        data: 'UserID=' + userid + '&EntityID=' + 0 + '&orderBy=0',
        success: function (response, textStatus, jqXHR) {
          response.data.forEach(function (brand) {
            brandsList.push({
              BrandDescription: brand.BrandDescription,
              BrandID: brand.BrandID,
              BrandImage: brand.BrandImage,
              BrandImage2: brand.BrandImage2,
              BrandLink: brand.BrandLink,
              BrandName: brand.BrandName,
              BrandReference: brand.BrandReference,
              Position: brand.Position,
              firstActive: brand.firstActive,
              sortOrder: brand.sortOrder
            });
          });
          this.setState({ brands: brandsList });
        }.bind(this),
        error: function error(jqXHR, textStatus, errorThrown) {
          console.log('an error ocurrered');
        }
      });
    }
  }]);

  return BrandsCarousel;
}(React.Component);

var domContainer = document.querySelector('#Reactbrands_container');
ReactDOM.render(React.createElement(BrandsCarousel, null), domContainer);

Answer 1

您尝试过

var Carousel = ReactBootstrap.Carousel

在使用Carousel之前？

编辑：我如何找到解决方案的一些见识。

在React-bootstrap网站上，您可以看到他们使用以下命令导入了Carousel：

import { Carousel } from 'react-bootstrap'

这意味着Carousel组件不是与export default一起导出的，而是与export一起导出的，并且根对象必须是其他东西。您需要找到根对象名称，然后“旋转木马”将出现在其参数中。

我所做的只是简单地将您拥有的所有3个js文件依次粘贴到浏览器的控制台中，然后找到单词。或者，如果您有耐心研究源代码，则可以找到名称here。虽然不是很直观。

在平台中包含React和react-bootstrap（不是单页应用）

1 个答案: