reactjs 中 div 标签的 JSX HTMLAttribute 设置样式问题 react-bootstrap

Question

我在没有 jsx 的 reactjs 中遇到 html div 属性的设置样式问题。

我正在从 calculateAvailableHeight() 计算 div 的高度，以便使用 overflow:auto 管理 div 内容。但不幸的是我无法为 div 标签设置样式。

版本：

"react": "^16.6.3",

"react-bootstrap": "^0.32.4",

"react-dom": "^16.6.3",

这里是 react 组件的 reactjs 代码

import React,{Component} from "react";
import {Row,Col,Tab,Nav,NavItem} from 'react-bootstrap';
import {calculateAvailableHeight} from './../../lib/uiComponentLib

var heightList = calculateAvailableHeight(50);
var ccUserStyle = {

    height : heightList ,
    overflow:"auto !important",

};

heightList 的输出：568px !important

class UserList extends Component{



render(){

    console.log("Reaching inside ", heightList );

    return (

    <div style={ccUserStyle}>
    <Tab.Container   id="sidebarTabContainer" defaultActiveKey="first" >
        <Row className="clearfix">
            <Col sm={12} className="cc-no-padding">
                <Nav bsStyle="pills" justified>
                    <NavItem eventKey="first">User</NavItem>
                    <NavItem eventKey="second">Group</NavItem>
                </Nav>
            </Col>
            <Col sm={12} className="cc-no-padding" style = height= {heightList} >
            <Tab.Content animation>
                <Tab.Pane eventKey="first">

                Userlist
                </Tab.Pane>

                <Tab.Pane eventKey="second">Group list</Tab.Pane>
            </Tab.Content>
            </Col>
        </Row>  
    </Tab.Container>
    </div>


  );
 }  
}

我正在使用 ccUserStyle object 来设置 div 样式。但是在渲染组件后，我没有看到 div 标签的任何样式属性。

请建议并帮助我解决这个问题。

提前致谢。

Answer 1

ccUserStyle 已经是一个对象，但是这个：

<div style={{ccUserStyle}}>

...将其包装在 另一个 对象中（使用 shorthand 属性表示法），因此无法找到样式属性重新 style.ccUserStyle.height 而不是 style.height.

只去掉一层{}:

<div style={ccUserStyle}>

Answer 2

感谢@TJCrowder 的领导，但我通过从“568px !important”中删除 "px !important" 字符串解决了这个问题。

因为 react16 非常严格，它避免了任何类型的数据类型错误。

所以在 CSSProperties 中只有 Number 被初始化为 height HttpAttribute JSX。

此问题仅与内联样式的 react16 版本有关。

如果您找到任何其他解决方案，请告诉我。

reactjs 中 div 标签的 JSX HTMLAttribute 设置样式问题 react-bootstrap

Issue with JSX HTMLAttribute setting style for div tag in reactjs react-bootstrap

javascript

html

css

reactjs

react-dom