Проблема со стилем установки JSX HTMLAttribute для тега div вactjs реагирует на загрузку - PullRequest
Новая
       11

Проблема со стилем установки JSX HTMLAttribute для тега div вactjs реагирует на загрузку

0 голосов
/ 06 декабря 2018

У меня проблема со стилем настройки атрибута html div вactjs без jsx.

Я рассчитываю высоту для div из calculateAvailableHeight(), чтобы управлять содержимым div с помощью overflow: auto.но, к сожалению, я не могу установить стиль для тега div.

версии: 

"react": "^16.6.3",

"react-bootstrap": "^0.32.4",

"react-dom": "^16.6.3",

Вот код реагирования для компонента реакции 

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! Важно 

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.

Пожалуйста, предложите и помогите мне исправить эту проблему.

Заранее спасибо.

Ответы [ 2 ]

0 голосов
/ 13 декабря 2018

Спасибо @TJCrowder за лидерство, но я решил проблему, удалив строку «px! Важный» из «568px! Важно».

Реакция16 очень строгая и позволяет избежать любых ошибок типа данных.

Так только Number будет инициализироваться с высотой HttpAttribute JSX в CSSProperties.

Эта проблема связана только с версиями реаги16 для встроенного стиля.

Пожалуйста, дайте мне знать, если вы найдете другое решение для того же.

0 голосов
/ 06 декабря 2018

ccUserStyle является уже объектом, но это: 

<div style={{ccUserStyle}}>

... оборачивает его в другой объект (используя сокращенную запись свойства),поэтому свойства стиля не будут найдены, так как они находятся на style.ccUserStyle.height вместо style.height.

Просто удалите один слой из {}: 

<div style={ccUserStyle}>
...