在平台中包括React和React引导程序(不是单页应用程序)

Question

按照https://reactjs.org/docs/add-react-to-a-website.html能够将React包含在我的平台中。下面的例子提供了一个尝试实现React的组件，它将是引导程序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>

但是得到错误

未捕获引用错误：未定义旋转木马

对于

_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引导程序网站中，你可以看到他们导入带有：的旋转木马

import { Carousel } from 'react-bootstrap'

这意味着Carousel组件不是用export default导出的，而是用export导出的，并且根对象必须是其他对象。你需要找到根对象的名称和旋转木马将在它的参数。

我所做的只是简单地将你所有的3个js文件按顺序粘贴到浏览器的控制台中，然后找到单词。或者，如果你有耐心查看源代码，你可以在这里找到名字。但不太直观。