react button bsClass 理解

小龙人儿 发布于 2015/12/14 19:44
阅读 437
收藏 0

【开源中国 APP 全新上线】“动弹” 回归、集成大模型对话、畅读技术报告”

在使用 react 的 bootstrap button 时看到如下这段文档:

bsClass string 'btn'

Base css class name and prefix for the Component. Generally one should only change bsClass if they are providing new, non bootstrap, css styles for a component.

本人英语比较渣,个人理解上面这段话的意思是:组建的基础 css 类名累和前缀。通常,如果你为组建提供的是新的,不在 bootstrap 的 css styles ,那么你只应该修改 bsClass 。

而我在自己的项目中这样使用
<Bootstrap.Button bsClass="user-remark" bsStyle="btn-link">{this.props.note}</Bootstrap.Button>

然后在自定义的 css 文件中对 user-remark 进行了装饰。
但是,当我测试这个页面时, console 出现 warning :
Warning: Failed propType: Invalid prop 'bsClass' of value 'user-remark' supplied to 'Button', expected one of ["alert","button","button-group","button-toolbar","column","input-group","form","glyphicon","label","thumbnail","list-group-item","panel","panel-group","pagination","progress-bar","nav","navbar","modal","row","well"]. Check the render method ofTestView.

当然,我能读懂这段 warning ,说的是 bsClass 应该使用提供的选项中拥有的属性。 那么,最上面的 Generally one should only change bsClass if they are providing new, non bootstrap, css styles for a component.是什么意思啊?或者说怎么用?我的理解有误?

ps :我知道 react 不建议自己手写 css ,那么成熟一点的方案应该是什么,求各位大神不灵赐教,

pps:https://www.v2ex.com/t/243525  v2ex这个问题也是我提的,大家不要觉得我照搬别人的问题哈~~~


加载中
0
zabcd117
zabcd117

我看了下最新的react-bootstrap,并找不到你说的这个warning,我是在github上源代码搜索的。而且你的理解也没有问题,建议你换到最新版本试试。不过,有一点注意,就是<Button />是通过bsclass和bsstyle共同作用的。

bsClass默认值btn

bsStyle默认值default

而我看到默认生成的样式是class="btn btn-default"

所以我猜如果你自定义的话,你的例子里面 bsClass="user-remark" bsStyle="btn-link",最终生成的button的className或许是class="user-remark user-remark-btn-link",你可以看一下。这也印证了"Base css class name and prefix for the Component"这句话,既是base,也是bsStyle的前缀。

我没有用过bootstrap,如果分析不对勿喷。。。

小龙人儿
小龙人儿
嗯,如果没有bsClass的话生成的是btn btn-link user-remark,但是当我加上bsClass='user-remark'时,button的class就会变为空,没有任何东西,我在想是不是因为我button在popover中的原因。还是没太明白。
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部