在 Meteor 的 JSX 文件中反应 Bootstrap

Question

我已经在我的流星应用程序中安装了 React Bootstrap 包。

https://atmospherejs.com/universe/react-bootstrap

在那个页面上写着：

This package additionally export ReactBootstrap as a global, so you can write inside any .jsx file

接着举例

let { Button } = ReactBootstrap;

<Button /> // React component
or

<ReactBootstrap.Button /> // React component

然而，当我这样做时：

render(){


        return (
                <div>

                    <ReactBootstrap.Button/>

                </div>
            );
    }

在 Meteor 中用于 React 的 render() 函数中，我收到以下错误：

universe_react-bootstrap.js?hash=85ba81631c5fee5b5e0bceb7d1dc34847f2f2e89:14811 Uncaught TypeError: Cannot read property '__reactAutoBindMap' of undefined at Constructor (universe_react-bootstrap.js?hash=85ba81631c5fee5b5e0bceb7d1dc34847f2f2e89:14811) at ReactCompositeComponentWrapper._constructComponentWithoutOwner (ReactCompositeComponent.js:291) at ReactCompositeComponentWrapper._constructComponent (ReactCompositeComponent.js:259) at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:178) at Object.mountComponent (ReactReconciler.js:49) at ReactDOMComponent.mountChildren (ReactMultiChild.js:242) at ReactDOMComponent._createInitialChildren (ReactDOMComponent.js:704) at ReactDOMComponent.mountComponent (ReactDOMComponent.js:529) at Object.mountComponent (ReactReconciler.js:49) at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:367)

但如果我这样做：

render(){
   console.log(ReactBootstrap)
}

我确认该全局变量存在....

如何在 div 标签中使用 ReactBootstrap？？？

这是完整的代码：

import React, { Component } from 'react';


// App component - represents the whole app
export default class App extends Component {



  render() {
    return (
      <div>
        <h1>Testing</h1>
        <ReactBootstrap.Button /> 
      </div>
    );
  }
}

这里是GitHublink： https://github.com/blissGitHub/TestingReactBootstrapWithMeteor.git

Answer 1

问题似乎在 universe:react-bootstrap 包中。它太旧了，似乎不再维护了。它使用 react-boostrap 的过时版本：0.24.2，而当前版本是 0.31.3（仅 3 周前发布）。

所以，我们似乎应该摆脱它：

meteor remove universe:react-bootstrap
meteor add twbs:bootstrap
meteor npm i --save react-bootstrap

并稍微修改您的代码：

import React, { Component } from 'react';
import ReactBootstrap from 'react-bootstrap';

// App component - represents the whole app
export default class App extends Component {
  render() {
    return (
      <div>
        <h1>Testing</h1>
        <ReactBootstrap.Button bsStyle="success">Click Me</ReactBootstrap.Button> 
      </div>
    );
  }
}

结果：

当然可以这样使用：

import ReactBootstrap from 'react-bootstrap';
const { Button } = ReactBootstrap;
...
<Button bsStyle="...">...</Button>

或者像这样：

import { Button } from 'react-bootstrap';
...
<Button bsStyle="...">...</Button>

Answer 2

看完docs包后，我相信你可以做这样的事情：

import React, { Component } from 'react';
import { Button } from 'bootstrap';


// App component - represents the whole app
export default class App extends Component {



  render() {
    return (
      <div>
        <h1>Testing</h1>
        <Button /> 
      </div>
    );
  }
}

在 Meteor 的 JSX 文件中反应 Bootstrap

React Bootstrap in JSX file in Meteor

meteor

reactjs

react-bootstrap