关于javascript：react bootstrap-向按钮添加自定义bsStyle属性

react bootstrap - adding custom bsStyle property to button

我正在为我的项目使用react-bootstrap，并且尝试将自定义bsStyle属性添加到按钮组件。如果我根据以下链接http://react-bootstrap.github.io/components.html#buttons使用默认的引导程序类，则将正确呈现类名。但是，如果我将属性更改为bsStyle='facebook'，它将呈现btn-undefined

简而言之，当我将bsStyle属性传递给react bootstrap中的组时，我不知道哪里出了问题。

这是我的HTML外观，

1 2	<Button id="facebook-btn" bsStyle="facebook" bsSize="large" block> </Button>

，如果我将代码更改为

1 2	<Button id="facebook-btn" bsStyle="primary" bsSize="large" block> </Button>

它可以正常工作，并且该类可以正确呈现。

这是控制台html日志

enter

通过在我的根组件中定义使它与styleMaps一起使用

With react-bootstrap 0.23.7

1
2
3

import {styleMaps} from 'react-bootstrap';

styleMaps.addStyle('facebook');

编辑：

Now with react-bootstrap 0.30.x

1
2
3
4

import {addStyle} from 'react-bootstrap/lib/utils/bootstrapUtils';
import Button from 'react-bootstrap/lib/Button';

addStyle(Button, 'facebook'); // can add more params for more styles

编辑2：

官方文档链接：自定义样式

编辑3：

当我将我的设置从browserify迁移到webpack2时，它不再使用此语法，尽管将其更改为该语法也可以：

1 2	// import Button from 'react-bootstrap/lib/Button'; // previous import {Button} from 'react-bootstrap';

bsStyle的可用值如下：

基本的
成功
信息
警告
关联

因此，当尝试查找Facebook样式时，它会失败，因此将其设置为undefined。